Jquery增加行和删除行

 1、input自动填充td并去掉边框，实现可编辑

2、序号自动+1

3、选中多选框，点击删除行按钮，删除所选中的行

4、增加行在table尾部追加

html代码如下：

<table class="table" id="table">
 <tr >
  <th>选项</th>
  <th>序号</th>
  <th>车船编号</th>
  <th>油品编号</th>
  <th>油品名称</th>
  <th>数量</th>
  <th>单位</th>
 </tr>
 <tr id="a">
  <td><input type="checkbox" name="test"/></td>
  <td class="td"><input type="text" value="1" readonly style="width: 100%;border:
   0px;outline:none;cursor: pointer;"></td>
  <td><input type="text" style="width: 100%;border: 0px;outline:none;cursor: pointer;" ></td>
  <td><input type="text" style="width: 100%;border: 0px;outline:none;cursor: pointer;" ></td>
  <td><input type="text" style="width: 100%;border: 0px;outline:none;cursor: pointer;" ></td>
  <td><input type="text" style="width: 100%;border: 0px;outline:none;cursor: pointer;" ></td>
  <td><input type="text" style="width: 100%;border: 0px;outline:none;cursor: pointer;" ></td>
 </tr>
</table>
<button onclick="add()" class="btn btn-xs btn-default"><i class="icon-plus">增加行</i></button>
<button onclick="del()" class="btn btn-xs btn-danger"><i class="icon-minus"></i>删除行</button>

 

js代码如下：

function add(){
   var $td = $("#a").clone();       //克隆第一个对象
   $(".table").append($td);         //在table后追加一行
   $(".table tr:last").find("input").val('');   //将尾行元素克隆来的的值清空
   var i = 1;
   $(".td").each(function(){       //增加一行后添加序号1,2,3......
     $(this).find("input").val(i++);
   })
}
function del(){
   $("input[name='test']:checked").each(function() {
     n = $(this).parents("tr").index();
     $("#table").find("tr:eq("+n+")").remove();
   });
}

5、获取table中的值  https://my.oschina.net/u/3502029/blog/2247054

转载于:https://my.oschina.net/u/3502029/blog/2252741