Question

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

我不太清楚如何解决这个问题，因为我对jQuery的体验非常有限，而且我无法在互联网上找到类似问题的东西。欢迎提出任何建议和建议。最终目标是能够从对话框表单发布到数据库，任何帮助将不胜感激。

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

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

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>

pass.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>";
    ?>

Answer 1

我明白了。首先，您需要删除第一个函数的show / hide组件，然后创建一个按钮而不是使用超链接引用。然后，您需要使用id设置tr。

<tr id="row">

然后在javascript中的一个函数，当你单击按钮时删除该行。

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

之后你应该全力以赴。

删除表行时，Jquery对话框关闭

1 个答案: