当我删除一个表格行时，jquery对话框关闭

我目前正试图从jquery中的一个对话框中删除一个表格行，但每当我尝试删除该行时，该对话框就会立即关闭。目前，php页面为对话框生成表格和行。现在要注意，这段代码在没有php页面调用的情况下工作得很好，但是通过添加php方面，对话框无法保持打开状态并删除表格行。当我删除一个表格行时，jquery对话框关闭

我不太清楚如何解决这个问题，因为我对jquery的使用经验非常有限，而且我还没有能够在互联网上找到类似问题。任何指针和建议都是受欢迎的。最终目标是能够从对话框表格发布到数据库，并且我们将不胜感激任何帮助。

该代码已被简化，以便不使用mysql查询，但最终我希望能够将无序数据列表传递到php页面以构建动态查询并允许用户提交表单其后。

下面是分成两个文件的代码...

1.PHP

<script> 
    function showTable(str, elementid, page) 
    { 
    if (str=="") 
    { 
    document.getElementById(elementid).innerHTML=""; 
    return; 
    } 
    if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } 
    else 
    {// code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 
     document.getElementById(elementid).innerHTML=xmlhttp.responseText; 
     } 
    } 
    xmlhttp.open("GET",page+"?q="+str,true); 
    xmlhttp.send(); 

    } 
    </script> 

    <!doctype html> 
    <html lang="en"> 
    <head> 
    <meta charset="utf-8" /> 
    <title>jQuery UI Dialog - Modal form</title> 
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" /> 
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
     <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script> 


    <script type="text/javascript"> 
      $(function() { 
      $("#dialog").dialog({ 
       autoOpen: false, 
       modal: true, 
       width: 'auto', 
       show: { 
       effect: "blind", 
       duration: 1000 
       }, 
       hide: { 
       effect: "explode", 
       duration: 1000 
       } 
      }); 

      $('span.delete').on('click', function() { 
          $(this).closest('tr').find('td').fadeOut(1000, 
           function(){ 
            // alert($(this).text()); 
            $(this).parents('tr:first').remove();      
           });  

          return false; 
         }); 


      $("#opener").click(function() { 
       $("#dialog").dialog("open"); 
      }); 
      }); 
      </script> 

</head> 
<body> 
    <input type=button id="opener" value="PRESS BUTTON!" onclick="showTable('NOTHING', 'dialog', '2pass.php')"> 

    <div id="dialog"> 

    </div> 

</body>

2pass.php

<?php   
echo "<form method = 'post'>"; 
echo "<table border='1' name='testTable'> 
<thead> 
    <tr> 
     <th>Name</th> 
     <th>Notes</th> 
     <th>Delete</th> 
    </tr> 
</thead> 
"; 

echo "<tbody>"; 

     echo "<tr>"; 
      echo "<td><input type='text' id='Name' value='Name' disabled></td>"; 
      echo "<td><input type='text' name='notes'></td>"; 
      echo '<td><span class="delete"><a href="">Delete</a></span></td>'; 
     echo "</tr>"; 

     echo "<tr>"; 
      echo "<td><input type='text' id='Name' value='Name' disabled></td>"; 
      echo "<td><input type='text' name='notes'></td>"; 
      echo '<td><span class="delete"><a href="">Delete</a></span></td>'; 
     echo "</tr>"; 

     echo "<tr>"; 
      echo "<td><input type='text' id='Name' value='Name' disabled></td>"; 
      echo "<td><input type='text' name='notes'></td>"; 
      echo '<td><span class="delete"><a href="">Delete</a></span></td>'; 
     echo "</tr>"; 

echo "</tbody>"; 
echo "</table>"; 
echo "</form>"; 
    ?>

来源

2013-03-07 rawrPowershell

我想通了。首先，您需要删除第一个函数的显示/隐藏组件，然后创建一个按钮，而不是使用超链接引用。然后你需要用一个id来设置tr。

<tr id="row">

然后在javascript函数删除一行，当你点击按钮。

$(document.getElementById(row)).remove();

之后，你应该准备就绪。

来源

2013-03-07 19:08:00 rawrPowershell

良好的工作原料，只是看你的问题。在将来尝试这个网站，jqueryui [jueryui api]（http://api.jqueryui.com/dialog/）的很好的api参考而不是“$（document.getElementById（row））”，你也可以使用这个版本： “$（” ＃行 “）删除（）;”。 – jjay225 2013-03-07 19:11:31

这是一个很好的资源，我一定会检查出来，因为我继续了解更多关于jQuery的知识。感谢您的提示！ – rawrPowershell 2013-03-07 21:55:17

您欢迎，另一个很好的练习是[jsfiddle]（http://jsfiddle.net/），对于发布工作代码示例也很有用。祝你好运！ – jjay225 2013-03-08 07:06:08

当我删除一个表格行时，jquery对话框关闭

回答

相关问题