如何使用 JQuery 编辑和更新动态表中的值？
下面是用于将输入添加到动态表中的代码，并且还为每一行生成一个编辑按钮，我的问题是，当我单击特定行的编辑按钮时，如何将表中的值传递回输入字段并然后，当我单击更新行按钮时，根据对输入字段中的值所做的更改来更新特定行。
$("#btnAdd").on('click', function() {
let row = '<tr> <td>' + $("#insert-name").val() + '</td> <td>' + $("#insert-surname").val() + '</td> <td>' + "edit" + '</td> </tr>'
$('tbody').append(row);
$('td:contains("edit")').html("<button type='button'>" + "edit" + "</button>").on('click', function() {
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div>
<label for="insert-name">Name:</label>
<input type="text" id="insert-name">
</div>
<div>
<label for="insert-surname">Surname:</label>
<input type="text" id="insert-surname">
</div>
</form>
<button type="button" id="btnAdd">Add to Table</button>
<button type="button" id="btnUpdate">Update row</button>
<table>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Surname</th>
<th scope="col">Edit</th>
</tr>
</thead>
<tbody id="tbody"></tbody>
</table>
慕沐林林浏览 104回答 2
2回答
-
慕娘9325324
检查这个（阅读 JS 评论）$("#btnAdd").on('click', function() { let row = '<tr> <td>' + $("#insert-name").val() + '</td> <td>' + $("#insert-surname").val() + '</td> <td>' + "edit" + '</td> </tr>' $('tbody').append(row); $('td:contains("edit")').html("<button type='button' class='edit'>" + "edit" + "</button>").on('click', function() { });});//--------------------------------------------------------//$(document).on("click",".edit",function(){ // Click function on class '.edit' (your appended button) var name = $(this).parents("tr").find("td:eq(0)").html(); // Search for 'name' depending on this edit button parent. var surname = $(this).parents("tr").find("td:eq(1)").html(); // Search for 'surname' depending on this edit button parent. var rowNumber = $(this).parents("tr").index() // Get index of this edit button parent 'row'. $("#edit-name").val(name); // Read the name and put it in '#edit-name' inside '.editArea'. $("#edit-surname").val(surname); // Read the surname and put it in '#edit-surname' inside '.editArea'. $(".saveEdits").attr("for",rowNumber); // Store this row index as attribute in '.saveEdits' button to be able to pass it to the other function that saves data. $(".editArea").fadeIn(300); // Show the edit box.});$(".saveEdits").click(function(){ // Function to save data var rowNumber = parseInt($(this).attr("for")); // Get the row number that we already define in the prev. function. $('td:eq(0)','tr:eq('+(rowNumber+1)+')').html($("#edit-name").val()); // Update 'td' content depending on the 'tr' index. $('td:eq(1)','tr:eq('+(rowNumber+1)+')').html($("#edit-surname").val()); // Update 'td' content depending on the 'tr' index.});$(".cancel").click(function(){ // Button to cancel edit. $("#edit-name").val(""); // Empty value. $("#edit-surname").val(""); // Empty value. $(".saveEdits").attr("for","0"); // Set row number to zero. $(".editArea").fadeOut(300); // Hide edit area.});.editArea{ display:none; background:#fff; padding:10px; border:1px solid #ddd; border-radius:5px; box-shadow:0 0 0 #000; width:50%;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><!DOCTYPE html><html dir="ltr"> <head> <meta charset="utf-8"> <title></title> </head> <body> <form> <div> <label for="insert-name">Name:</label> <input type="text" id="insert-name"> </div> <div> <label for="insert-surname">Surname:</label> <input type="text" id="insert-surname"> </div> </form> <button type="button" id="btnAdd"> Add to Table </button> <table> <thead> <tr> <th scope="col">Name</th> <th scope="col">Surname</th> <th scope="col">Edit</th> </tr> </thead> <tbody id="tbody"> </tbody> </table> <div class='editArea'> <label>Name</label> <input type="text" id="edit-name"> <br> <label>Surname</label> <input type="text" id="edit-surname"> <hr> <button class='saveEdits' for="0">Save edits</button> <button class='cancel'>Cancel</button> </div> </body></html> -
米脂
这是一个在现有输入中编辑行的解决方案var counter = 0;var current_row = null;$("#btnAdd").on('click', function() { if (current_row == null) { if ( $("#insert-surname").val().length && $("#insert-name").val().length ) { let row = '<tr data-row="'+counter+'"> <td>' + $("#insert-name").val() + '</td> <td>' + $("#insert-surname").val() + '</td> <td>' + "edit" + '</td> </tr>' $('tbody').append(row); counter++; } } else { var select_row = $('tr[data-row='+current_row+']'); let cells = $(select_row).find('td'); $(cells[0]).text($("#insert-name").val()); $(cells[1]).text($("#insert-surname").val()); } clear_input();$('td:contains("edit")').html("<button type='button'>" + "edit" + "</button>").on('click', function() { let cells = $(this).parents('tr').find('td'); $("#insert-name").val($(cells[0]).text()); $("#insert-surname").val($(cells[1]).text()); current_row = $(this).parents('tr').data('row'); });});$('#btnCancel').on("click", () => clear_input());function clear_input() { current_row = null; $("#insert-name").val(''); $("#insert-surname").val('');}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><form> <div> <label for="insert-name">Name:</label> <input type="text" id="insert-name"> </div> <div> <label for="insert-surname">Surname:</label> <input type="text" id="insert-surname"> </div></form><button type="button" id="btnAdd">Add to Table</button><button type="button" id="btnCancel">Cancel</button><table id='data-table'> <thead> <tr> <th scope="col">Name</th> <th scope="col">Surname</th> <th scope="col">Edit</th> </tr> </thead> <tbody id="tbody"></tbody></table>
随时随地看视频慕课网APP
相关分类
Html5