js dom动态添加删除表格数据的例子-百分百源码网

js dom动态添加删除表格数据的例子

发布时间：01/15 来源：浏览：关键词：

动态添加删除表格数据其实很简单只要通过dom获得要删除行的一个id进行移除即可，当然中间也可能碰到一些位置问题，下面来看看吧。

学习了两天的 js dom 高级操作应用，实例代码基本上都听懂了，只是自己还没有能力全部敲出来，因为 js 操作 table 的代码太多了，js 对节点操作除了 div 之外，也可以更好的操作表单，这两天学到的是 js 如何进行对 table 的操作，当然也遇到了神奇的 js 增删改查，虽然没有用到数据库，但其效果蛮给力的，本来视频的代码想要一行一行敲下来，只是脑子里太乱了，只能从网上把视频上的代码给拷贝下来，仅供自己参考使用吧，这里的代码是关于 js 动态添加与删除表格数据的，感觉有点意思，回头如果有用的话，可以直接拿来使用。
实例效果图片如下：

只要我文本框里面添加相应的信息，然后点击添加按钮，下面会自动多出一条信息和删除按钮，点击删除按钮之后就可以进行删除了，代码如下：

代码如下

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script>
        window.onload = function () {
            var oTab = document.getElementById('tab1');
            var tBody = oTab.getElementsByTagName('tbody')[0];
            var oldColor = '';//定义一个颜色，可以改变回原先背景色
            //alert(oTab.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[1].getElementsByTagName('td')[1].innerHTML);//某个单元格的值，复杂写法
            //alert(oTab.tBodies[0].rows[1].cells[1].innerHTML);//表格的tbody[0]固定，毕竟一个table里面只有一个tbody，row[1]第二行，cells[1]第二列
            for (var i = 0; i < oTab.tBodies[0].rows.length; i++) {
                oTab.tBodies[0].rows[i].onmouseover = function () {
                    oldColor = this.style.backgroundColor;//颜色=当前背景色
                    this.style.backgroundColor = 'green';
                }
                oTab.tBodies[0].rows[i].onmouseout = function () {
                    this.style.backgroundColor = oldColor;//将当前背景色在移出时赋给当前背景色
                }
                if (i % 2) {
                    oTab.tBodies[0].rows[i].style.backgroundColor = "#ccc";
                }
                else {
                    oTab.tBodies[0].rows[i].style.backgroundColor = "#fff";
                }
            }

            var name = document.getElementById("name");
            var age = document.getElementById("age");
            var btn = document.getElementById("btn");
            var ID = oTab.tBodies[0].rows.length + 1;
            btn.onclick = function () {

                var oTr = document.createElement('tr');//创建一行

                var oTd = document.createElement('td');//创建第一列


                oTd.innerHTML = ID++;//第一列的值=该行+1
                oTr.appendChild(oTd);//添加到行中

                var oTd = document.createElement('td');//创建第二列
                oTd.innerHTML = name.value;//第二列的值为姓名
                oTr.appendChild(oTd); //xiariboke.com

                var oTd = document.createElement('td');//第三列
                oTd.innerHTML = age.value;
                oTr.appendChild(oTd);

                var oTd = document.createElement('td');//删除
                oTd.innerHTML = "<a hred='javascript:;'>删除</a>";
                oTr.appendChild(oTd);

                oTd.getElementsByTagName('a')[0].onclick = function () {//删除事件
                    tBody.removeChild(this.parentNode.parentNode);
                }

                tBody.appendChild(oTr);//将tr加到表格中
            }

        }

    </script>
</head>
<body>
    姓名：
    <input id="name" type="text" />
    年龄：<input id="age" type="text" />
    <input id="btn" type="button" value="添加" />
    <table id="tab1" border="1" width="500px">
        <thead>
            <td>ID</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>操作</td>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Blue</td>
                <td>27</td>
            </tr>
            <tr>
                <td>2</td>
                <td>张三</td>
                <td>23</td>
            </tr>
            <tr>
                <td>3</td>
                <td>李四</td>
                <td>28</td>
            </tr>
            <tr>
                <td>4</td>
                <td>张伟</td>
                <td>28</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

打赏