ダイアログフォームフィールドにjqueryボタンをクリックして動的テーブルデータを入力する

Question

これまでに質問を投稿していませんが、このサイトは非常に役に立ちましたので、ありがとうございます。フォームを作成するために使用するフィールドと同じ行の「編集」ボタンをクリックすると、動的テーブルデータを使用して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" 
     }); 

私は正しいでこれを掲示することを願っています方法。 誰でもお手伝いできます。 基本的に私のテーブルにはデータベースからの動的データが取り込まれています。編集ボタンをクリックするとこのデータをフォームに表示する必要があります。最終的にデータを編集し、編集したデータをデータベースに更新できます。私の "populating form js"で起きていることは、最初のフィールド（fname）だけがテーブルから引っ張られ、最初のフォームフィールドに移入されることです。

Answer 1

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

が働い

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