jquery之单击 jquery 按钮时使用动态表数据填充对话框表单字段

我以前没有在这里发布过问题，但是这个网站非常有帮助，所以谢谢。当我单击与我想要用来填充表单的字段位于同一行的“编辑”按钮时，我在使用动态表数据填充 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" 
        }); 

我希望我以正确的方式发布了此内容。 感谢任何能够提供帮助的人。 基本上我的表填充了来自数据库的动态数据，当我单击编辑按钮时，我需要在表单中显示这些数据 - 以便我最终可以编辑数据并将编辑后的数据更新到数据库。我的“填充表单 js”现在发生的情况只是从表中提取第一个字段(fname)并填充第一个表单字段。

请您参考如下方法:

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');