以下是一个编辑行数据的代码示例:
HTML代码:
Name
Email
Action
John Doe
john@example.com
Jane Smith
jane@example.com
JavaScript代码:
function editRow(button) {
var row = button.parentNode.parentNode;
var cells = row.getElementsByTagName("td");
// 获取当前行的数据
var name = cells[0].innerText;
var email = cells[1].innerText;
// 创建编辑表单
var form = document.createElement("form");
var nameInput = document.createElement("input");
var emailInput = document.createElement("input");
nameInput.value = name;
emailInput.value = email;
form.appendChild(nameInput);
form.appendChild(emailInput);
// 替换当前行的数据为编辑表单
row.innerHTML = "";
row.appendChild(form);
// 创建保存按钮
var saveButton = document.createElement("button");
saveButton.innerText = "Save";
saveButton.onclick = function() {
// 获取修改后的数据
var newName = nameInput.value;
var newEmail = emailInput.value;
// 更新当前行的数据
cells[0].innerText = newName;
cells[1].innerText = newEmail;
// 替换编辑表单为按钮
var actionCell = row.getElementsByTagName("td")[2];
actionCell.innerHTML = "";
actionCell.appendChild(editButton);
actionCell.appendChild(deleteButton);
};
// 创建取消按钮
var cancelButton = document.createElement("button");
cancelButton.innerText = "Cancel";
cancelButton.onclick = function() {
// 恢复当前行的原始数据
cells[0].innerText = name;
cells[1].innerText = email;
// 替换编辑表单为按钮
var actionCell = row.getElementsByTagName("td")[2];
actionCell.innerHTML = "";
actionCell.appendChild(editButton);
actionCell.appendChild(deleteButton);
};
// 替换按钮为保存和取消按钮
var actionCell = row.getElementsByTagName("td")[2];
actionCell.innerHTML = "";
actionCell.appendChild(saveButton);
actionCell.appendChild(cancelButton);
}
function deleteRow(button) {
var row = button.parentNode.parentNode;
row.parentNode.removeChild(row);
}
这段代码实现了一个简单的表格,每一行都包含一个“Edit”按钮和一个“Delete”按钮。点击“Edit”按钮将会将当前行的数据替换为一个编辑表单,点击“Save”按钮将会保存修改后的数据,点击“Cancel”按钮将会取消编辑并恢复原始数据,点击“Delete”按钮将会删除当前行。
你可以将这段代码复制到一个HTML文件中并运行以查看效果。
上一篇:编辑消息文本的一个简单示例js
下一篇:编辑形状的超链接