如何select一个表行数据,并将其发送到编辑模式使用jQuery,JavaScript和AJAX更新数据?

我有一个dynamic表,其中包含一些数据。在我的表中有一个选项称为编辑,通过单击编辑选项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(); }; 

使用jQuery

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

这里是完美和干净的解决scheme:

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