jQuery实现表格行的动态增删

最新推荐文章于 2022-03-26 18:28:19 发布

cocoy2007

最新推荐文章于 2022-03-26 18:28:19 发布

阅读量122

点赞数

分类专栏： JS 文章标签： jQuery JavaScript HTML ViewUI

本文链接：https://blog.csdn.net/cocoy2007/article/details/83612974

版权

JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近学习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" οnclick="add()" /><!--增加一行-->
        <input type="button" value="remove" οnclick="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>

稍微改造一下即可实现删除指定行，不赘述。

cocoy2007

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现表格行的动态增删

最近学习jQuery，真的很强大，试了下表格行的动态增删，代码很简单，如下&lt;html&gt; &lt;head&gt;&lt;title&gt;&lt;/title&gt;&lt;/head&gt; &lt;body&gt; &lt;script type="text/javascript" src="../js/jquery.js"&amp
复制链接

扫一扫