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

187 阅读 0 评论 124 点赞

我是靠谱客的博主淡然网络，最近开发中收集的这篇文章主要介绍基于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> 