Jquery :删除不能正常工作的行
Jquery :删除不能正常工作的行
提问于 2014-03-03 06:30:19
我的代码实现如下：
如果单击“确定”按钮，则显示“删除”按钮为“clicked.Then”时显示对话框，但如果单击“取消”按钮，则对话框将消失，此行不会被删除。
我的问题是，单击“取消”按钮之后，如果删除任何其他行，则前一行(单击“取消”按钮)也会被删除。
我的代码是：
<html>
<head>
<link rel="stylesheet" href="jquery-ui-1.10.4.custom/development-bundle/themes/base/jquery.ui.all.css">
<script src="jquery-ui-1.10.4.custom/js/jquery-1.10.2.js"></script>
<script src="jquery-ui-1.10.4.custom/development-bundle/ui/jquery.ui.core.js"></script>
<script src="jquery-ui-1.10.4.custom/development-bundle/ui/jquery.ui.widget.js"></script>
<script src="jquery-ui-1.10.4.custom/development-bundle/ui/jquery.ui.position.js"></script>
<script src="jquery-ui-1.10.4.custom/development-bundle/ui/jquery.ui.button.js"></script>
<script src="jquery-ui-1.10.4.custom/development-bundle/ui/jquery.ui.dialog.js"></script>
<link rel="stylesheet" href="jquery-ui-1.10.4.custom/development-bundle/demos/demos.css">
<script>
$(function() {
$('#b1').click(function(){
$( "#dialog" ).css('visibility','visible');
$( "#dialog" ).dialog();
$('#bt1').click(function(){
$('#r1').remove();
$( "#dialog" ).dialog('close');
});
});
$('#b2').click(function(){
$( "#dialog" ).css('visibility','visible');
$( "#dialog" ).dialog();
$('#bt1').click(function(){
$('#r2').remove();
$( "#dialog" ).dialog('close');
});
});
$('#b3').click(function(){
$( "#dialog" ).css('visibility','visible');
$( "#dialog" ).dialog();
$('#bt1').click(function(){
$('#r3').remove();
$( "#dialog" ).dialog('close');
});
});
$('#bt2').click(function(){
$( "#dialog" ).dialog('close');
});
});
</script>
</head>
<body>
<div id="dialog" title="Confirmation Box" style="visibility:hidden;">
<p>Are you sure that you want to perform this action ?</p>
<input type="button" value="OK" id="bt1">  
<input type="button" value="Cancel" id="bt2">
</div>
<table cellspacing="0px" cellpadding="5px" border="1px">
<tr>
<th>Name
<th>Roll No
<th>Delete
<tr id="r1">
<td>Reena
<td>9/cs117
<td><input type="button" value="Delete" id="b1">
<tr id="r2">
<td>Ajay
<td>10/cs47
<td><input id="b2" type="button" value="Delete">
<tr id="r3">
<td>Meeta
<td>11/cs72
<td><input id="b3" type="button" value="Delete">
</table>
</body>
</html>回答 4
Stack Overflow用户
回答已采纳
发布于 2014-03-03 07:47:58
问题是您在每个函数中都设置了侦听器。因此，即使您单击了cancel按钮，只要单击id为"bt1“的按钮，侦听器也会启动。
解决方案
创建单独的方法来删除行，如下所示。
$('#bt1').click(function(){ $('#'+v).remove(); $( "#dialog" ).dialog('close');});在所有其他方法中，只为变量v赋值，如r1、r2、r3。
v='r2';就这样。确保在所有方法的顶部声明变量v。
$(function() {var v=null;样本法
$('#b2').click(function(){$( "#dialog" ).css('visibility','visible');$( "#dialog" ).dialog();v='r2';});Stack Overflow用户
发布于 2014-03-03 07:05:10
您应该尝试修复HTML表。我知道关闭td的/tr是可选的，但是如果不添加它们，可能会导致错误。阅读这篇文章
<table cellspacing="0px" cellpadding="5px" border="1px">
<tr>
<th>Name</th>
<th>Roll No</th>
<th>Delete</th>
</tr>
<tr id="r1">
<td>Reena</td>
<td>9/cs117</td>
<td><input type="button" value="Delete" id="b1"></td></tr>
<tr id="r2">
<td>Ajay</td>
<td>10/cs47</td>
<td><input id="b2" type="button" value="Delete"></td></tr>
<tr id="r3">
<td>Meeta</td>
<td>11/cs72</td>
<td><input id="b3" type="button" value="Delete"></td></tr>
</table>Stack Overflow用户
发布于 2014-03-03 07:15:18
您可以尝试下面的代码
<body>
<table cellspacing="0px" cellpadding="5px" border="1px">
<tr>
<th>Name</th>
<th>Roll No</th>
<th>Delete</th>
</tr>
<tr id="r1">
<td>Reena</td>
<td>9/cs117</td>
<td>
<input class="btnDelete" type="button" value="Delete" id="b1" /></td>
</tr>
<tr id="r2">
<td>Ajay</td>
<td>10/cs47</td>
<td><input class="btnDelete" id="b2" type="button" value="Delete"/></td>
</tr>
<tr id="r3">
<td>Meeta</td>
<td>11/cs72</td>
<td><input class="btnDelete" id="b3" type="button" value="Delete"/></td>
</tr>
</table>
</body>
<script type="text/javascript">
$(function () {
$('td input.btnDelete').click(function () {
$("#dialog").css('visibility', 'visible');
var tr = $(this).closest('tr');
$('#bt1').click(function () {
tr.remove();
$("#dialog").css("visibility", "hidden");
});
});
$('#bt2').click(function () {
$("#dialog").css("visibility", "hidden");
});
});
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22140109
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号