<table id="tab" border="1" width="70%" align="left" style="height: 30px">
<tr style="background-color: #4B5F71; border-color: #364B5F; color: #E9EDEF">
<td width="20%">序号</td>
<td>姓名</td>
<td>手机号</td>
<td style="width: 30px">操作</td>
</tr>
</table>
<button type="button" id="tableadd" class="">增加</button>
<button type="button" id="ok" class="" onclick="ok()">确认</button>
//增加
$("#tableadd")
.click(
function() {
var _len = $("#tab tr").length;
//var _len=1;
$("#tab")
.append(
"<tr id="+_len+" align='center'>"
+ "<td>"
+ _len
+ "</td>"
+ "<td><input style='width:100%;height:25px;' type='text' name='desc"
+ _len
+ "' id='desc"
+ _len
+ "' /></td>"
+ "<td><input style='width:100%;height:25px;' type='text' name='desc"
+ _len
+ "' id='desc"
+ _len
+ "' /></td>"
+ "<td><a href=\'#\' onclick=\'deltr("
+ _len
+ ")\'>删除</a></td>"
+ "</tr>");
})
//删除<tr/>
var deltr = function(index) {
var _len = $("#tab tr").length;
$("tr[id='" + index + "']").remove();//删除当前行
for (var i = index + 1, j = _len; i < j; i++) {
var nextTxtVal = $("#desc" + i).val();
$("tr[id=\'" + i + "\']").replaceWith(
"<tr id=" + (i - 1) + " align='center'>" + "<td>" + (i - 1)
+ "</td>" + "<td><input type='text' name='desc"
+ (i - 1) + "' value='" + "" + "' id='desc"
+ (i - 1) + "'/></td>"
+ "<td><input type='text' name='desc" + (i - 1)
+ "' value='" + "" + "' id='desc" + (i - 1)
+ "'/></td>" + "<td><a href=\'#\' onclick=\'deltr("
+ (i - 1) + ")\'>删除</a></td>" + "</tr>");
}
}
//js 中获取input 值
var end = 1;
for (var m = 1; m <= end; m++) {
var _arrayItem = [];
//获取td 下的 input值
var input = document.getElementById("tab").getElementsByTagName(
"input");
for (i = 0; i < input.length; i++) {
//alert(input[i].value);
console.log(m);
_arrayItem.push(input[i].value); //添加到数组中
}
}
动态添加表格与删除、获取表格中输入的值
猜你喜欢
转载自blog.csdn.net/panshoujia/article/details/78732895
今日推荐
周排行