HTML增加/删除一行表格
head
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
body
<table align="center"width="100%" id="tab" border="1">
<tr>
<th>工号</th>
<th>姓名</th>
<th>操作</th>
</tr>
<tr id="show" >
<td>
<input id="name##" placeholder="请输入成员工号"/>
</td>
<td>
<input id="phone##" placeholder="请输入成员姓名"/>
</td>
<td>
<button type="button" class="layui-btn layui-btn-primary"onclick="addRow()">添加</button>
<button type="button"class="layui-btn layui-btn-primary" onclick="deleteRow(##)">删除</button>
</td>
</tr>
</table>
JS
function addRow() {
var index = 0;//初始下标
var indexArr= new Array();
index++;
indexArr.push(index);
var showHtml = $("#show").html();
var html = "<tr id=tr##>"+showHtml+"</tr>";
html = html.replace(/##/g,index);//把##替换成数字
$("#show").before($(html));
console.log("当前下标数组",indexArr);}
function deleteRow(inde){
$("#tr" + inde).remove();
var a = indexArr.indexOf(parseInt(inde));
if (a > -1) {
indexArr.splice(a, 1);
console.log("当前下标数组",indexArr);
}
}
