您好,欢迎访问代理记账网站
移动应用 微信公众号 联系我们

咨询热线 -

电话 15988168939

联系客服
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

操作表格元素,删除、增加表格中的元素

1、隔行显色

for循环遍历tbody里的行元素个数,设置单行和双行的颜色,只要用 if  语句判断一下i的奇偶性

for(var i=0; i<oTable.tBodies[0].rows.length; i++) {
    if(i%2 === 0) {
        oTable.tBodies[0].rows[i].style.background = 'pink';
    }
    else {
        oTable.tBodies[0].rows[i].style.background = '#2996FF';
    }
}

tBodies[0] : 相当于 getElementByTagName'tbody[0]‘

rows[0] : 相当于getElementByTagName'tr[0]'

cells[0] : 相当于getElementByTagName'td[0]'

同理 tHead、tFoot


 

2、鼠标移上去显示高亮

很简单。给鼠标移上去的行元素添加鼠标事件即可

需要注意的是如果单纯在鼠标移开事件直接设置背景颜色为空或者其他颜色,那么最后运行结果是 鼠标移开的行元素全部显示设置的颜色。所以要先设置一个空变量,然后将鼠标移入前的背景颜色存进去,当鼠标移出的时候,再将这个变量赋给行元素背景

var oldColor = '';

oTable.tBodies[0].rows[i].onmouseover = function () {
    oldColor = this.style.background;
    this.style.background = 'green';
}
oTable.tBodies[0].rows[i].onmouseout = function () {
    this.style.background = oldColor;

}

 

3、增加行元素

给提交按钮添加点击事件,用到creatElement  appendChild()  

然后将input的值传给增加的单元格的innerHTML

oSubmit.onclick = function () {
                   var oTr = document.createElement('tr');

                   var oTd = document.createElement('td');
                   oTd.innerHTML = oTable.tBodies[0].rows.length+1;
                   oTr.appendChild(oTd);

                   var oTd = document.createElement('td');
                   oTd.innerHTML = oName.value;
                   oTr.appendChild(oTd);

                   var oTd = document.createElement('td');
                   oTd.innerHTML = oAge.value;
                   oTr.appendChild(oTd);

                   oTable.tBodies[0].appendChild(oTr);
               };

 


 

4、删除行元素

给增加的行元素增加删除链接,给删除链接设置点击事件,用到removeChild()

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


                   oTable.tBodies[0].appendChild(oTr);

                   oTd.getElementsByTagName('a')[0].onclick = function () {
                       oTable.tBodies[0].removeChild(this.parentNode.parentNode);
                   };

 

5、是删除的数据不被复用

如果按上面的代码,运行结果会发现一个问题

先增加几行(随便,只要大于2),然后删除其中一行,然后再添加一行,你会发现这行的 id 被复用了

栗子:

                     

问题展示

解决方法是:

设置一个变量,将rows的length+1存入,(为什么要存length+1??因为增加的行元素的id就是总行数再加1),然后再传给增加的单元格的innerHTML,使它自增。(++放在变量后是先执行再加1)

var oId = oTable.tBodies[0].rows.length + 1;

 var oTd = document.createElement('td');
 oTd.innerHTML = oId++;
 oTr.appendChild(oTd);

 

总代码

    <script>
        window.onload = function () {
           var oTable = document.getElementById('tab1');
           var oName = document.getElementById('name');
           var oAge = document.getElementById('age');
           var oSubmit = document.getElementById('submit');
           var oldColor = '';
           var oId = oTable.tBodies[0].rows.length + 1;

           for (var i=0; i<oTable.tBodies[0].rows.length; i++) {
               if (i%2 === 0) {
                   oTable.tBodies[0].rows[i].style.background = 'pink';
               }

               oTable.tBodies[0].rows[i].onmouseover = function () {
                   oldColor = this.style.background;
                   this.style.background = 'green';
               };
               oTable.tBodies[0].rows[i].onmouseout = function () {
                   this.style.background = oldColor;
               };

               oSubmit.onclick = function () {
                   var oTr = document.createElement('tr');

                   var oTd = document.createElement('td');
                   oTd.innerHTML = oId++;
                   oTr.appendChild(oTd);

                   var oTd = document.createElement('td');
                   oTd.innerHTML = oName.value;
                   oTr.appendChild(oTd);

                   var oTd = document.createElement('td');
                   oTd.innerHTML = oAge.value;
                   oTr.appendChild(oTd);

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


                   oTable.tBodies[0].appendChild(oTr);

                   oTd.getElementsByTagName('a')[0].onclick = function () {
                       oTable.tBodies[0].removeChild(this.parentNode.parentNode);
                   };

               };

           }
        };
    </script>


<body>
<input id="name" type="text">
<input id="age" type="text">
<input id="submit" type="button" value="提交">
<table id="tab1" border="1" width="500">
    <thead>
        <td>ID</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>操作</td>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>梁什</td>
        <td>16</td>
        <td></td>
    </tr>
    <tr>
        <td>2</td>
        <td>梁么</td>
        <td>17</td>
        <td></td>
    </tr>
    <tr>
        <td>3</td>
        <td>梁鸭</td>
        <td>18</td>
        <td></td>
    </tr>
    <tr>
        <td>4</td>
        <td>梁什</td>
        <td>16</td>
        <td></td>
    </tr>
    <tr>
        <td>5</td>
        <td>梁么</td>
        <td>17</td>
        <td></td>
    </tr>
    <tr>
        <td>6</td>
        <td>梁鸭</td>
        <td>18</td>
        <td></td>
    </tr>
    </tbody>
</table>
</body>

 

 


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进