下面是用于将输入添加到动态表中的代码，并且还为每一行生成一个编辑按钮，我的问题是，当我单击特定行的编辑按钮时，如何将表中的值传递回输入字段并然后，当我单击更新行按钮时，根据对输入字段中的值所做的更改来更新特定行。$("#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>
2 回答
慕娘9325324
TA贡献1783条经验 获得超4个赞
检查这个（阅读 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>
米脂
TA贡献1836条经验 获得超3个赞
这是一个在现有输入中编辑行的解决方案
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>
- 2 回答
- 0 关注
- 103 浏览
添加回答
举报
0/150
提交
取消