Jquery中文网 www.jquerycn.cn
Jquery中文网 >  jQuery  >  jquery 教程  >  正文 基于jquery的实现简单的表格中增加或删除下一行

基于jquery的实现简单的表格中增加或删除下一行

发布时间:2013-08-05   编辑:www.jquerycn.cn
下面的代码利用jquery简单的实现表格中增加和删除一行,很简单。
下面的代码利用jquery简单的实现表格中增加和删除一行,很简单。 代码如下:
html
复制代码 代码如下:

<div>
<table>
<tr><td>1111</td><td><input type="button" value="添加下一行" /><input type="button" value="删除下一行" /></td></tr>
<tr><td>2222</td><td><input type="button" value="添加下一行" /><input type="button" value="删除下一行" /></td></tr>
<tr><td>4444</td><td><input type="button" value="添加下一行" /><input type="button" value="删除下一行" /></td></tr>
</table>
</div>

jquery代码:
复制代码 代码如下:

<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
ModifyClick();
});
function ModifyClick() {
$("table tr input[type='button'] ").each(function () {
$(this).unbind("click");
$(this).bind("click", function () {
if ($(this).val() == "添加下一行") {
$(this).parent().parent().after("<tr><td>Add</td><td><input onclick=\"ModifyClick()\" type=button value=\"添加下一行\" /><input onclick=\"ModifyClick()\" type=button value=\"删除下一行\" /></td></tr>");
}
if ($(this).val() == "删除下一行") {
$(this).parent().parent().next().eq(0).remove();
}
});
});
}
</script>

您可能感兴趣的文章:
HTML5中Web Sql的学习小结
PostgreSQL从菜鸟到专家系列教程(4)第二章关系数据库原理
php删除记录同时刷新当前页面的实现代码
mysql索引创建与删除命令
golang实现常用集合原理介绍
MySQL多表更新与多表删除的实现方法
php代码生成器好用吗
有关mysql的一些小技巧
mysql创建与删除索引实例
sed单行命令大全 值得收藏

[关闭]