0

現在、jQuery 内のダイアログ ボックスからテーブルの行を削除しようとしていますが、行を削除しようとすると、ダイアログ ボックスがすぐに閉じます。現在、PHP ページは、ダイアログ ボックスのテーブルと行を生成します。このコードは、PHP ページ呼び出しがなくても問題なく動作しますが、PHP アスペクトを追加すると、ダイアログ ボックスが開いたままになり、テーブル行が削除されません。

jQuery での私の経験は非常に限られており、同様の問題でインターネット上で何かを見つけることができなかったため、これに取り組む方法がよくわかりません。ポインタや提案は大歓迎です。最終的な目標は、ダイアログ ボックス フォームからデータベースに投稿できるようにすることです。

コードは単純化されているため、mysql クエリは使用されませんが、最終的にはデータの順序付けられていないリストを php ページに渡して動的クエリを作成し、その後ユーザーがフォームを送信できるようにしたいと考えています。

以下は、2つのファイルに分割されたコードです...

  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>

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

1 に答える 1

0

私はそれを考え出した。最初に、最初の関数の表示/非表示コンポーネントを削除してから、ハイパーリンク参照を使用する代わりにボタンを作成する必要があります。次に、ID を使用して tr を設定する必要があります。

<tr id="row">

次に、ボタンをクリックしたときに行を削除する JavaScript の関数。

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

その後、すべて設定する必要があります。

于 2013-03-07T19:08:00.753 に答える