js 操作表格行数的删减

沉溺了好几个月了，自从年假回来就一直在忙换工作的事情；

新环境、新同事，一如既往的工作，

那么闲话不多说，前两天师妹问我要一个类似于添加和删除的demo；闲暇时间我就参照一些代码写了一下，

（发现有错误的话：大神勿吐槽、勿喷）

1、首先我们来看一下效果：

就是类似这样的：

在点击删除行的时候删除行数；

在点击添加行的时候在已有的基础上依次添加行数，

2、其次，代码走起；

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6      <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
 7    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
 8    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
 9    <style>
10 *{
11     margin: 30px;
12 }
13    </style>
14 
15 </head>
16 <body>
17     <table width="40%" border="1" id="tb" style=" border-collapse: collapse;border:1px dotted blue;font-size:14px; ">
18 <tr>
19 <td>一个萝卜一个坑，<br>一个美女一个配，</td>
20 <td>一个萝卜一个坑，<br>一个美女一个配，</td>
21 <td>一个萝卜一个坑，<br>一个美女一个配，</td>
22 </tr>
23 <tr>
24 <td>一个萝卜一个坑，<br>一个美女一个配，</td>
25 <td>一个萝卜一个坑，<br>一个美女一个配，</td>
26 <td>一个萝卜一个坑，<br>一个美女一个配，</td>
27 </tr>
28 <tr>
29 <td>一个萝卜一个坑，<br>一个美女一个配，</td>
30 <td>一个萝卜一个坑，<br>一个美女一个配，</td>
31 <td>一个萝卜一个坑，<br>一个美女一个配，</td>
32 </tr>
33 
34 </table>
35 <p>
36 <br>
37 <script> 
38 function delrow(){   //删除行
39 var i=tb.rows.length;
40 tb.deleteRow(i-1);
41 }
42 function addrow(){  //添加行
43     var tr = document.createElement('tr');
44     var cellsNum = tb.rows[0].cells.length;
45     for(var j = 0 ; j < cellsNum ; j++){
46         var td = document.createElement('td');
47         td.innerHTML='add'+'<br />'+'new';
48         tr.appendChild(td);
49     }
50     tb.tBodies[0].appendChild(tr);
51 }
52 </script>
53 <button type="button" class="btn btn-success" onClick="delrow();">删除行</button>
54 <button type="button" class="btn btn-info" onClick="addrow();">添加行</button>
55  <p style="margin-left:300px;">------------------------------------尐瑞</p>
56 </body>
57 </html>

* 注：引用了bootstrap的按钮样式；（不喜，勿喷）

posted on 2015-04-24 18:04 Angelべ桀瑞阅读(1575) 评论(2) 编辑收藏举报