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

时间:2012-11-16 06:35:26

标签: jquery jquery-ui-dialog dynamic-data

我之前没有在这里发过一个问题,但这个网站非常有帮助,谢谢。当我点击与我想用来填充表单的字段相同的行中的“编辑”按钮时,我在使用动态表格数据填充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)从表中拉出并填充第一个表单字段。

1 个答案:

答案 0 :(得分:2)

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