手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >基于jquery的实现简单的表格中增加或删除下一行
基于jquery的实现简单的表格中增加或删除下一行
摘要:代码如下:html复制代码代码如下:111122224444jquery代码:复制代码代码如下:$(document).ready(func...

代码如下:

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>

【基于jquery的实现简单的表格中增加或删除下一行】相关文章:

javascript实现简单的省市区三级联动

JavaScript实现列表分页功能特效

jQuery实现弹出窗口中切换登录与注册表单

jQuery实现dialog设置focus焦点的方法

jQuery实现延迟跳转的方法

jquery实现点击label的同时触发文本框点击事件的方法

jQuery实现在列表的首行添加数据

JQuery中DOM实现事件移除的方法

jQuery实现的多屏图像图层切换效果实例

原生JS和JQuery动态添加、删除表格行的方法

精品推荐
分类导航