沉溺了好几个月了，自从年假回来就一直在忙换工作的事情；
新环境、新同事，一如既往的工作，
那么闲话不多说，前两天师妹问我要一个类似于添加和删除的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的按钮样式；（不喜，勿喷）