Question

我的代码实现如下：

单击任何行的删除按钮时会显示一个对话框。然后，如果单击确定按钮，此行将被删除，但如果单击取消按钮，则对话框将消失，此行不会被删除。

我的问题是，点击取消按钮后，如果我删除任何其他行，那么前一行（我点击取消按钮）也会被删除。

我的代码是：

<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">&nbsp&nbsp
<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>

Answer 1

您应该尝试修复HTML表格。我知道关闭td的/ tr是可选的，但是如果你不添加它们会导致错误。 Read this

<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>

Answer 2

你可以尝试下面的代码

<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>

Answer 3

试试这个

$("#b1").click(function(){$(function () {
                    $('#dialog').dialog({

                        resizable: false,
                        modal: true,
                        width: "auto",
                        height: "auto",
                        buttons: {
                            "Yes":  {
                                text: "Yes",
                                id: "ConfirmDel",
                                click: function () {
                                    $('#ConfirmDel').click(function(){

                                      //Do your code here 
                                            $(this).dialog('close');
                                  });
                                  }
                                  },
                            "No":
                                  {
                                    text:"No",
                                    id:"NoDel",
                                    click:function () { $(this).dialog('close'); }
                                  }
  }

})
})

Answer 4

问题是你在每个函数中都有了监听器。因此，即使您点击了取消按钮，只要您点击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';});

Jquery：删除行无法正常工作

4 个答案: