如何使用jQuery，JavaScript和AJAX选择表行数据并将其发送到Edit Modal以更新数据？

Question

我有一个动态表，其中包含一些数据。在我的表中有一个名为``编辑''的选项，通过单击SideNav正在打开的编辑选项。我想从表中获取该特定行并将这些信息放入我的sideNav中。

我的HTML和JS文件如下。

/index.html

<table class="table-bordered mytable">
                     <thead class="table-head">
                     <tr>
                         <th>Name</th>
                         <th>Email</th>
                         <th>Status</th>
                         <th>Address</th>
                         <th>Action</th>
                     </tr>
                     </thead>
                     <tbody class="table-body mytabBody">
                     </tbody>
                </table>
<div id="mySidenav" class="sidenav">
                    <div class="border">
                        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
                    </div>
                    <div class="border">
                        <form class="navbar-form" id="editUserInfo">
                            <div class="form-group">
                                <input type="text" class="form-control" id="user_name" placeholder="User name">
                            </div>
                            <div class="form-group">
                                <input type="email" class="form-control" id="email_id" placeholder="Enter email">
                            </div>
                            <div class="form-group">
                                <input type="text" class="form-control" id="address" placeholder="Enter Address">
                            </div>
                            <button type="submit" value="signin" class="btn btn-custom" onclick="editUser()">Edit</button>
                        </form>
                    </div>
                </div> 

/table.js

     $(function(){
        $.get("/api/dashboard/v1", function (response) {
                // console.log(response);
                var myhtmlsec= "";
                for(var i=0; i<response.data.length; i++) {
                    myhtmlsec += "<tr>";
                    myhtmlsec +="<td>"+response.data[i].user_name+"</td>";
                    myhtmlsec +="<td>"+response.data[i].email+"</td>";
                    myhtmlsec +="<td></td>";
                    myhtmlsec +="<td>"+response.data[i].address+"</td>";
                    myhtmlsec +="<td>\
                        <a href='#' onclick='myEdit(this);return false;' class='table-edit img-size'>\
                        <img src='image/Edit.png'>\
                        </img>\
                        </a>\
                        <a href='#' onclick='myDelete();return false;' class='table-delete img-size'>\
                        <img src='image/Delete.png'>\
                        </img>\
                        </a>\
                        </td>";
                    myhtmlsec +="</tr>"
                }
                $('.table-body').append(myhtmlsec);

            });
    });
function myEdit(a) {

    document.getElementById("mySidenav").style.width = "250px";
    /*console.log(a);
    var b = $(a).closest('tr');
    console.log(b);
*/

};

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
};

function editUser() {
    var par = $(this).parent().parent();
    var tdName = par.children("td:nth-child(1)");
    var tdEmail = par.children("td:nth-child(2)");
    var tdAddress = par.children("td:nth-child(3)");

    //want to edit/update userinformation through this "api/updateUser/v1:id" using put method 

}

function myDelete() {
    alert();
};

Answer 1

使用jQuery

function myEdit(elem)
{
    $('#user_name').val($(elem).parent().parent().find('td:nth-child(1)').html());
    ...
    /* fill other fields */
}

Answer 2

这是完美和干净的解决方案：

 $('tbody tr').click( function(){ var name = $(this).find("td:nth-child(1)").html(); var email = $(this).find("td:nth-child(2)").html(); var addr = $(this).find("td:nth-child(3)").html(); $('#user_name').val(name); $('#email_id').val(email); $('#address').val(addr); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <table class="table-bordered mytable"> <thead class="table-head"> <tr> <th>Name</th> <th>Email</th> <th>Status</th> <th>Address</th> <th>Action</th> </tr> </thead> <tbody class="table-body mytabBody"> <tr> <td>Pravin</td> <td>pravin@gmail.com</td> <td>True</td> <td>Nagpur</td> <td>Click</td> </tr> </tbody> </table> <div id="mySidenav" class="sidenav"> <div class="border"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> </div> <div class="border"> <form class="navbar-form" id="editUserInfo"> <div class="form-group"> <input type="text" class="form-control" id="user_name" placeholder="User name"> </div> <div class="form-group"> <input type="email" class="form-control" id="email_id" placeholder="Enter email"> </div> <div class="form-group"> <input type="text" class="form-control" id="address" placeholder="Enter Address"> </div> <button type="submit" value="signin" class="btn btn-custom" onclick="editUser()">Edit</button> </form> </div> </div>