5

以前ここに質問を投稿したことがありませんでしたが、このサイトは非常に役に立ちました。フォームに入力するために使用するフィールドと同じ行の「編集」ボタンをクリックすると、jQuery ダイアログ フォームに動的テーブル データを入力する際に​​問題が発生しました。

ここに私のHTMLコード：ダイアログフォーム：

<div id="edit-dialog-form" class="edit-dialog-form" title="Edit Subscriber"><!--EDIT SUBSCRIBER - PULL FROM DB & UPDATE TO DB-->

            <form name="editSubscriber"><!--edit existing subscriber details in database--->
            <fieldset>
                <label for="fname">First Name</label>
                <input type="text" name="fname" id="fnameEdit" value="" class="text ui-widget-content ui-corner-all"/>

                <label for="lname">Last Name</label>
                <input type="text" name="lname" id="lnameEdit" value="" class="text ui-widget-content ui-corner-all" />

                <label for="email">Email</label>
                <input type="text" name="email" id="emailEdit" value="" class="text ui-widget-content ui-corner-all" />

                <label for="status">Status</label>
                <input type="text" name="status" id="statusEdit" value="" class="text ui-widget-content ui-corner-all" />

                <!--<label for="password">Password</label>
                <input type="text" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />-->

            </fieldset>
            </form>
        </div><!-- create - dialog-form-->

HTML テーブル

<table id="users" class="ui-widget ui-widget-content">
            <thead>
            <tr class="ui-widget-header ">
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
                <th>Status</th>
                <th>Edit</th>
            </tr>
            </thead>
            <tbody>

            <?php

            $content = $sub_info;


                foreach($content as $row)
                {
                    //print_r($row);
                    echo '<tr>';
                    echo '<td data-fn="'.$row['SubFirstName'].'" >'.$row['SubFirstName'].'</td>';
                    echo '<td data-ln="'.$row['SubLastName'].'">'.$row['SubLastName'].'</td>';
                    echo '<td data-em="'.$row['SubEmail'].'">'.$row['SubEmail'].'</td>';
                    echo '<td data-st="'.$row['Activated'].'">'.$row['Activated'].'</td>';
                    echo '<td><input type="button" class="editUser" id="editUser" value="Edit"/></td>';
                    echo '</tr>';
                }
            ?>

            </tbody>
        </table>

ここに私のJSコード：

$(".editUser").click(function(){
                $( ".edit-dialog-form" ).dialog( "open" );

              //get the data-xx values from this tr
              var fname = $(this).closest('tr').find('td').data('fn');//data-fn="'.$row[SubFirstName].'"
              // put each into the form
              $('#fnameEdit').val(fname);//where #fnameEdit is the id of input field form "editSubscriber"

              //get the data-xx values from this tr//
              var lname = $(this).closest('tr').find('td').data('ln');
              // put each into the form
              $('#lnameEdit').val(lname);//where #lnameEdit is the id of input field form "editSubscriber"
        });

これを正しい方法で投稿したことを願っています。助けてくれる人に感謝します。基本的に、私のテーブルにはデータベースからの動的データが入力されており、編集ボタンをクリックしたときにこのデータをフォームに表示する必要があります。これにより、最終的にデータを編集し、編集したデータをデータベースに更新できます。私の「populate form js」で何が起こっているかというと、最初のフィールド (fname) だけがテーブルから引き出され、最初のフォーム フィールドに値が入力されているだけです。

4

1 に答える 1

2 
var fname = $(this).closest('tr').find('td').data('fn');

そうあるべきだと思います

var fname = $(this).closest('tr').find('td:eq(0)').data('fn');//data-fn

と

var lname = $(this).closest('tr').find('td').data('ln');

する必要があります

var lname = $(this).closest('tr').find('td:eq(1)').data('ln');
于 2012-11-16T06:39:14.683 に答える