[英]How to edit the row data using jQuery
我的目標是創建一個程序，在其中我將在表上添加數據，包括刪除和編輯按鈕。 我已經創建了用於添加新數據/行和刪除行的代碼。 我的問題是我無法弄清楚如何編輯表中的數據/行的代碼。 這是我的代碼：
$(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>
先感謝您！
答案取決於所需的UI。 正如評論中指出的那樣，每行上都有一個編輯按鈕可能會更好。
假設您要堅持使用當前的UI，您的編輯處理程序將使用與表單中相同的標記替換每個選定的行。 您將使用該行中的數據預填充表單的字段。
您需要使用的選擇器與上面的選擇器略有不同：
$(".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
});
});
顯然，您還需要在某個位置添加“保存”或“確定”按鈕，以便當用戶完成所有編輯后，他們可以保存它。
您可以將TD更改為輸入，以便用戶可以直接編輯該值。 並附加一個函數以捕獲和操縱該值。
模板可能如下所示：
$(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);
});
和這樣的功能：
editFunc = function(e){
console.log($(e).find('.id').val());
console.log($(e).find('.name').val());
//Do something else with the values
}
一種簡單的方法是在每個td值后面創建一個輸入文本，並且當用戶單擊編輯按鈕時所有值都不顯示，而此時所有td值都不顯示並且所有文本框值都顯示為塊，並且將屬性設置為edit button為onclick = 'updaterow（）'，為此函數設置適當的參數，其主體具有有關update的代碼，將所有輸入文本還原為不顯示任何內容，並且根據新值顯示所有td值。
我的英語不太好，但我希望它有意義
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>
如何使用jQuery，JavaScript和AJAX選擇表行數據並將其發送到Edit Modal以更新數據？
[英]How to select a table row data and send it to a Edit Modal for update data using jQuery, JavaScript and AJAX?
如何使用 javascript/jquery 在每一行中添加編輯和刪除按鈕
[英]How to add Edit and delete button in each row using javascript/jquery
單擊“編輯”按鈕時，如何使用jquery從循環表的每一行傳遞id？
[英]How to pass the id from each row of a loop table using jquery when edit button is click?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.