JQuery动态实现table行自增自减

来源：互联网发布：软件质量定义编辑：程序博客网时间：2024/05/24 01:25

效果图：

代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-3.2.1/jquery-3.2.1.min.js"></script>
<script>

var row_count = 0;
$(function () {
$("#but").click(function () {
row_count++;
var tr = '<tr id ="tri'+row_count+'"><td style="width:800px;height:20px;"> <input type="text" style="width:800px" /></td></tr>';
$("#tab").append(tr);
// $("#tab tr:eq(1)").after(tr);
});
$("#butD").click(function () {

var tr = $("#tri"+row_count);
tr.remove();
row_count--;
});
});
</script>
</head>
<body>
<button id="but">自增</button>
<input type="button" id="butD" value="删除"/>

<table id="tab" style="width:800px;height:20px;border:1px solid red">

</table>

</body>
</html>

注意：需要引用jQuery

row_count记录自增的行数

阅读全文

1 0