如何使用jQuery编辑行数据
[英]How to edit the row data using jQuery
问题描述
My goal is to create a program where I would add data on a table, including a DELETE and EDIT button.
我的目标是创建一个程序，在其中我将在表上添加数据，包括删除和编辑按钮。 I have already created a code for adding a new data/row and deleting a row.我已经创建了用于添加新数据/行和删除行的代码。 My problem is I can't figure out the code on how to edit the data/row in the table.我的问题是我无法弄清楚如何编辑表中的数据/行的代码。 Here's my code:这是我的代码：
$(document).ready(function(){ $(".add-row").click(function(){ var id = $("#id").val(); var name = $("#name").val(); var gender = $("#gender").val(); var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + id + "</td><td>" + name + "</td><td>" + gender + "</td></tr>"; $("table tbody").append(markup); }); // Find and remove selected table rows $(".delete-row").click(function(){ $("table tbody").find('input[name="record"]').each(function(){ if($(this).is(":checked")){ $(this).parents("tr").remove(); } }); $(".edit-row").click(function(){ if($(this).is(":checked")){ $(this).html('<input type="text" value="' + $(this).html() + '"/>'); }; }); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery Form</title> <link rel="stylesheet" type="text/css" href="css/jstyle.css"> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="js/script.js"></script> </head> <body> <form> <input type="text" id="id" placeholder="ID Number"> <input type="text" id="name" placeholder="Name"> <label>Gender: <select id="gender"> <option value="Male">Male</option> <option value="Female">Female</option> </select> </label> <input type="button" class="add-row" value="Add Row"> </form> <table> <thead> <tr> <th>Select</th> <th>ID Number</th> <th>Name</th> <th>Gender</th> </tr> </thead> <tbody> <tr hidden> <td><input type="checkbox" name="record"></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> <button type="button" class="delete-row">Delete Row</button> <button type="button" class="edit-row">Edit Row</button> </body> </html>
Thank you in advance!先感谢您！
4 个解决方案
解决方案1
0 2017-12-01 14:46:33
The answer depends on your desired UI. 答案取决于所需的UI。 As was pointed out in the comments, it might be nicer to have an edit button on each row. 正如评论中指出的那样，每行上都有一个编辑按钮可能会更好。
Assuming you want to stick with your current UI, your edit handler would replace each selected row with the same markup that you have in your form. 假设您要坚持使用当前的UI，您的编辑处理程序将使用与表单中相同的标记替换每个选定的行。 You would pre-populate the fields of the form with the data from that row. 您将使用该行中的数据预填充表单的字段。
The selector you need to use for that is a little different that what you've got above: 您需要使用的选择器与上面的选择器略有不同：
$(".edit-row").click(function() {
$("tr").not('[hidden]').each(function(index, element) {
//element is the TR
//Check to see if it's selected
//Proceed with the inline replacement
});
});
Obviously, you also need to add a "Save" or "Ok" button somewhere so that, when the user is finished with all the edits, they can save it. 显然，您还需要在某个位置添加“保存”或“确定”按钮，以便当用户完成所有编辑后，他们可以保存它。
解决方案2
0 2017-12-01 15:11:42
You could change the TD to input so the user can edit the value directly. 您可以将TD更改为输入，以便用户可以直接编辑该值。 and attach a function to capture and manipulate the value. 并附加一个函数以捕获和操纵该值。
The template could look like this: 模板可能如下所示：
$(document).ready(function(){
$(".add-row").click(function(){
var id = $("#id").val();
var name = $("#name").val();
var gender = $("#gender").val();
var markup = "<tr onclick='editFunc(this);'><td><input class='id' type='checkbox' name='record'></td><td>" + id + "</td><td><input class='name' type='text' value='" + name + "'></td><td><input type='text' value='" + gender + "'></td></tr>";
$("table tbody").append(markup);
});
And the function like this: 和这样的功能：
editFunc = function(e){
console.log($(e).find('.id').val());
console.log($(e).find('.name').val());
//Do something else with the values
}
解决方案3
0 2017-12-02 08:03:17
the easy way is create a input text behind each td value and all value are display none when user click on the edit button that time all td values are display none and all text box values display block and also set attribute to edit button to onclick='updaterow()', set appropriate parameter to this function and its body have the code about update revert back all input text to display none and all td value set according to new value. 一种简单的方法是在每个td值后面创建一个输入文本，并且当用户单击编辑按钮时所有值都不显示，而此时所有td值都不显示并且所有文本框值都显示为块，并且将属性设置为edit button为onclick = 'updaterow（）'，为此函数设置适当的参数，其主体具有有关update的代码，将所有输入文本还原为不显示任何内容，并且根据新值显示所有td值。
My english is not well but I hope it make sense 我的英语不太好，但我希望它有意义
解决方案4
0 2021-11-12 07:25:10
Et qui non culpa to Et qui non culpa to
//Data added on table when click on submit. var edit_row = null; $("#submit").on("click", function () { var fname = $("#fname").val(); var lname = $("#lname").val(); var number = $("#number").val(); var row = "<tr><td class='first'>" + fname + "</td><td class='last'>" + lname + "</td><td class='mobile'>" + number + '</td><td><a href="" class="fas fa-edit edit text-primary" style="cursor:pointer"></a> <a class="fas fa-trash-alt dlt text-danger" style="cursor:pointer"></a></td></tr>'; if (edit_row) { $("#myTable tbody").find($(edit_row)).replaceWith(row); edit_row = null; } else if ((fname != "" && lname != "" && number != "")) { $("#myTable tbody").append(row); } // After submit all values are null using below codes. $("#fname").val(''); $("#lname").val(''); $("#number").val(''); }); // Data delete in table when click on delete button. $(document).on('click', '.dlt', function () { $(this).parents('tr').remove(); return false; }); // Data again fill in form when click on edit. $(document).on('click', '.edit', function () { edit_row = $(this).closest('tr'); $("#fname").val($(this).closest('tr').find('.first').text()); $("#lname").val($(this).closest('tr').find('.last').text()); $("#number").val($(this).closest('tr').find('.mobile').text()); }); // Thank you.
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image" href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQoqksPBDeWpznZfj0_XtgkNO5npIUwP7n7n0GCXos3PGoEGHLwapvcf_qlnbXWf-bd-Us&usqp=CAU"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"> <style> .form-label { margin: 0%; } </style> <title>Edit and Delete</title> </head> <body> <!-- form --> <div class="container mt-5 d-flex justify-content-center"> <form class="row" id="myForm"> <div class="col-8"> <label for="fname" class="form-label">First Name</label> <input type="text" class="form-control" id="fname" placeholder="First Name"> </div> <div class="col-8 mt-3"> <label for="lname" class="form-label">Last Name</label> <input type="text" class="form-control" id="lname" placeholder="Last Name"> </div> <div class="col-8 mt-3"> <label for="number" class="form-label">Mobile Number</label> <input type="tel" class="form-control" maxlength="10" minlength="10" id="number" placeholder="Mobile Number"> </div> <div class="col-12 mt-3"> <button type="button" id="submit" class="btn btn-primary">Submit</button> </div> </form> </div> <!-- Table --> <table class="table container mt-5" id="myTable"> <thead> <tr> <th scope="col">First Name</th> <th scope="col">Last Name</th> <th scope="col">Mobile Number</th> <th scope="col">Action</th> </tr> </thead> <tbody> </tbody> </table> <footer style="float: right;display: block;position: fixed;bottom: 20px;right: 20px;">Made by <a style="text-decoration: none;color: black;font-weight: 600;" href="https://www.instagram.com/_ridham_golakiya/">Ridham Golakiya</a></footer> <!-- Scripts --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/js/all.min.js"></script> <script src="edit&delete.js"></script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.