jQuery实现表格行的动态增删
程序员文章站
2022-06-07 22:08:22
...
最近学习jQuery，真的很强大，试了下表格行的动态增删，代码很简单，如下
<html>
<head><title></title></head>
<body>
<script type="text/javascript" src="../js/jquery.js"></script><!--引入jQuery.js-->
<input type="text" id="enter" value="default" /><!--输入表格的内容，默认default-->
<input type="button" value="add" onclick="add()" /><!--增加一行-->
<input type="button" value="remove" onclick="remove()" /><!--删除最后一行-->
<table id="tbl" border="1" width="100px" >
<tr><th>Title</th></tr>
</table>
</body>
<script type="text/javascript">
var i = 0;
function add() {
i++;
var v = document.getElementById('enter').value;
var content = "<tr class="+i+"><td>"+v+"</td></tr>";
$('#tbl').append(content);
}
function remove() {
$('tr').remove('.'+i);
i--;
}
</script>
</html>稍微改造一下即可实现删除指定行，不赘述。