<!DOCTYPE html>
<html>
<head>
<meta charset=
"UTF-8"
>
<title>新增一行</title>
</head>
<body>
<table>
<tr>
<th>序号</th>
<th>姓名</th>
<th>电话</th>
<th>地址</th>
<th>操作</th>
</tr>
<!--这一行是隐藏的,主要用户方便js中获取html代码-->
<!--##:js中会替换成数字-->
<tr id=
"show"
style=
"display: none"
>
<td>##</td>
<td>
<input id=
"name##"
/>
</td>
<td>
<input id=
"phone##"
/>
</td>
<td>
<input id=
"address##"
/>
</td>
<td>
<button type=
"button"
onclick=
"deleteRow('##')"
>删除</button>
</td>
</tr>
</table>
<button type=
"button"
onclick=
"addRow()"
>新增一行</button>
<script src=
"http://code.jquery.com/jquery-1.9.1.min.js"
></script>
<script >
var
index = 0;
var
indexArr=
new
Array();
function
addRow() {
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);
}
}
</script>
</body>
</html>