Jquery 实现表格动态增加一行，删除一行

Jquery 实现表格动态增加一行，删除一行

需求是要实现表格的动态增加与删除，并且保留标题行和首行，找了半天jq插件，没找到合适的，所以自己写了个demo

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78

<! DOCTYPE  html> < html > < head > < meta  charset="utf-8"> < link  href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> < script  src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></ script > < script  src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></ script > < style  type="text/css">      table.table input{ /*可输入区域样式*/ width:100%; height: 100%;    border:none; /* 输入框不要边框 */ font-family:Arial; } </ style > </ head > < body > < br > < table  class="table" border="1">      < thead >      < tr >          < th >检项</ th >          < th >厚度</ th >          < th >光度</ th >          < th >外观</ th >      </ tr >      </ thead >      < tbody >      < tr  id="a">                    < td  class="td"></ td >          < td >< input  type="" name=""></ td >          < td >< input  type="" name=""></ td >          < td >< input  type="" name=""></ td >                </ tr >      < tr >                    < td  class="td"></ td >          < td >< input  type="" name=""></ td >          < td >< input  type="" name=""></ td >          < td >< input  type="" name=""></ td >                 </ tr >                </ tbody >       </ table > < button  onclick="fun()">增加一行</ button > < button  onclick="del()">删除一行</ button > < script  type="text/javascript">                   //前面的序号1,2,3......      var i = 1;      $(".td").each(function(){          $(this).html(i++);      })      function fun(){          var $td = $("#a").clone();       //增加一行,克隆第一个对象          $(".table").append($td);          var i = 1;          $(".td").each(function(){       //增加一行后重新更新序号1,2,3......          $(this).html(i++);          })          $("table tr:last").find(":input").val('');   //将尾行元素克隆来的保存的值清空      }      function del(){          $("table tr:not(:first):not(:first):last").remove();      //移除最后一行,并且保留前两行      } </ script >   </ body >  </ html >