一个分享个人学习、开发经验的Blog,http://www.joyphper.net

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

posted @ 2011-01-14 11:43 | 阅读:4023 | 评论:0 | 分类: Javascript

代码如下:
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> 

TAG: jQuery , 表格添加删除

共有0条评论 发表评论>>

点击换一张验证码