Điền vào các trường biểu mẫu hộp thoại với dữ liệu bảng động onclick của nút jquery

Question

Tôi chưa đăng câu hỏi ở đây trước đây, nhưng trang này đã rất hữu ích, vì vậy cảm ơn bạn. Tôi đã gặp một số rắc rối khi điền một biểu mẫu hộp thoại jQuery với dữ liệu bảng động khi tôi nhấp vào nút "chỉnh sửa" trong cùng hàng với các trường tôi muốn sử dụng để điền biểu mẫu.

HTML code của tôi ở đây: dạng Dialog:

<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 Bảng

<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> 

mã JS của tôi ở đây:

$(".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" 
     }); 

Tôi hy vọng rằng tôi đăng này trong đúng đường. Nhờ bất kỳ ai có thể giúp đỡ. Về cơ bản bảng của tôi có dữ liệu động từ cơ sở dữ liệu và tôi cần hiển thị dữ liệu này khi tôi nhấp vào nút chỉnh sửa - để cuối cùng tôi có thể chỉnh sửa dữ liệu và cập nhật dữ liệu đã chỉnh sửa vào cơ sở dữ liệu. Điều gì đang xảy ra với "js form form" của tôi bây giờ chỉ là trường đầu tiên (fname) đang được kéo ra khỏi bảng và điền vào trường biểu mẫu đầu tiên.

Answer 1

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

đoán nó phải được

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

và

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

nên

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