<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
function tables() {
var tcount = $("#tab tr").length;
var tpl = $("<tr>" +
"<td><input type='text' name='name"+tcount+"' /></td>" +
"<td><input type='text' name='age"+tcount+"' /></td>" +
"<td><input type='text' name='sex"+tcount+"' /></td>" +
"</tr>");
$("#tab").append(tpl);
var tcount = $("#tab tr").length;
console.log($("#tab"))
console.log(tcount)
// addtr.appendTo(tables);
}
function del() {
var tcount = $("#tab tr").length;
console.log(tcount)
if(tcount>2){
--tcount
$("#tab tr:eq("+tcount+")").remove();
}
}
</script>
<body>
<button class="button" onclick="tables();">添加一行</button>
<button class="button" onclick="del();">删除</button>
<table id="tab" class="table">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>
</html>
HTML动态增加和删除表格的行
猜你喜欢
转载自blog.csdn.net/weixin_42187290/article/details/87370044
今日推荐
周排行