如何使用 jQuery、JavaScript 和 AJAX 选择表格行数据并将其发送到编辑模式以更新数据？

Question

我有一个动态表，其中包含一些数据。在我的表中有一个名为 Edit 的选项，通过单击编辑选项，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

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

$('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>

Answer 2

使用 jquery

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