Füllen Sie Dialogformularfelder mit dynamischen Tabellendaten onclick eines jquery Knopfes

Question

Ich habe keine Frage vorher hier gepostet, aber diese Seite war sehr hilfreich, also danke. Ich habe einige Probleme beim Füllen eines jQuery-Dialogformulars mit dynamischen Tabellendaten, wenn ich auf eine Schaltfläche "Bearbeiten" in der gleichen Zeile wie die Felder klicke, die ich verwenden möchte, um das Formular mit zu füllen.

Mein HTML-Code hier: Dialogform:

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

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

Mein JS-Code hier:

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

Ich hoffe, dass ich dies in der richtigen geschrieben Weg. Danke an alle, die helfen können. Grundsätzlich ist meine Tabelle mit dynamischen Daten aus einer Datenbank gefüllt, und ich muss diese Daten im Formular anzeigen, wenn ich auf die Bearbeitungsschaltfläche klicke - damit ich die Daten bearbeiten und die bearbeiteten Daten in der Datenbank aktualisieren kann. Was mit meiner "populierenden Form js" passiert ist jetzt nur das erste Feld (fname) wird aus der Tabelle gezogen und füllt das erste Formularfeld.

Answer 1

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

denke, es

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

und

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

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