相思资源网 Design By www.200059.com
代码如下:
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="/UploadFiles/2021-04-02/jquery-1.4.1.js"><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>
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="/UploadFiles/2021-04-02/jquery-1.4.1.js"><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>
标签:
表格,增加,删除
相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com
暂无基于jquery的实现简单的表格中增加或删除下一行的评论...