How to edit the row data using jQuery
Question
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 answers
solution1
0 2017-12-01 14:46:33
The answer depends on your desired 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. 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.
solution2
0 2017-12-01 15:11:42
You could change the TD to input so the user can edit the value directly. 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
}
solution3
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.
My english is not well but I hope it make sense
solution4
0 2021-11-12 07:25:10
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.