Compilare i campi del modulo di dialogo con i dati dinamici della tabella onclick di un pulsante jquery

Question

Non ho ancora postato una domanda qui, ma questo sito è stato molto utile, quindi grazie. Ho avuto qualche problema nel compilare un modulo di dialogo jQuery con dati di tabella dinamici quando faccio clic su un pulsante "modifica" nella stessa riga dei campi che voglio utilizzare per compilare il modulo.

Il mio codice HTML qui: forma di dialogo:

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

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

Il mio codice JS qui:

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

Spero che ho postato questo nella corretta modo. Grazie a chiunque sia in grado di aiutare. Fondamentalmente la mia tabella è popolata con dati dinamici da un database, e ho bisogno di mostrare questi dati nel modulo quando clicco sul pulsante di modifica - in modo che io possa eventualmente modificare i dati e aggiornare i dati modificati nel database. Quello che sta succedendo con il mio "modulo di popolamento js" ora è solo il primo campo (fname) che viene estratto dalla tabella e che popola il primo campo del modulo.

Answer 1

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

indovinare dovrebbe essere

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

e

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

dovrebbe essere

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