javascript实现表格增删改操作实例详解

我们为新行的末尾添加了一个复选框`_oCheckBox_`。这个复选框为用户提供了一个选择整行的便捷方式。当复选框被选中时，它的父节点的索引值被添加到`_arrSelect_`数组中，方便后续的操作。

当新行被双击时，会触发一个事件。这个事件首先检查先前选定的行是否存在修改。如果存在修改并且用户未保存，它会弹出一个提示框询问用户是否保存修改。如果用户选择不保存并继续操作，它会检查新行的第一个单元格是否为空。如果为空，它会提示用户“姓名不能为空，请重新编辑”。这一设计考虑到了用户的操作体验和数据的完整性。

当面对用户想要删除某些行的操作时，首先检查他们是否已经做出了选择。如果没有，提示他们先进行选择。如果用户已经选择了要删除的行，接下来要做的就是确认他们的决定是否正确。在这个过程中，代码会遍历用户选择的每一行，获取每行的名字信息，并构建一个确认消息提示用户。这个过程的具体实现如下：

当删除按钮被点击时：

```javascript

var deleteButton = document.getElementById("btnDelete");

deleteButton.onclick = function() {

if (_arrSelect_.length === 0) {

alert("请先选择要删除的行。");

return;

}

if (_OTable_ && _oTbody_) {

var confirmationMessage = "你确定要删除以下名字的信息吗？";

for (var index = 0; index < _arrSelect_.length; index++) {

var rowToDelete = _oTbody_.rows[parseInt(_arrSelect_[index])];

var cellName = rowToDelete.cells[0].firstChild.nodeValue; // 获取第一列的单元格名字信息

confirmationMessage += cellName + ""; // 构建确认消息提示用户删除的具体信息

}

// 这里可以添加确认删除的弹窗逻辑，例如使用confirm函数确认用户是否确定删除这些信息。如果用户确定删除，则执行删除操作。

} else {

}

};

```

当某个特定事件触发时（比如一个编辑按钮被点击）：

```javascript

// 假设已有代码将某个行的索引赋值给 this.rowIndex，并已知单元格数量 CELLS_COUNT

var tempValueStorage = {}; // 用于存储原值的临时对象，方便后续恢复或操作。这里只是作为一个示例，实际应用中可以根据需求进行调整。

for (var cellIndex = 0; cellIndex < CELLS_COUNT; cellIndex++) {

var oldNode = this.cells[cellIndex].firstChild; // 获取当前单元格的第一个子节点（假设是文本节点）

tempValueStorage["$" + cellIndex] = oldNode.nodeValue; // 保存当前单元格原来的值

var newTextBox = document.createElement("input"); // 创建新的输入框元素

newTextBox.setAttribute("type", "text"); // 设置输入框类型为文本类型

newTextBox.setAttribute("value", oldNode.nodeValue); // 设置输入框的初始值，为原文本节点的值

this.cells[cellIndex].replaceChild(newTextBox, oldNode); // 将原文本节点替换为新的输入框元素

}

this.rowIndex--; // 更新索引值（假设是在编辑某行之后更新索引值） 后续可以根据需求进行其他操作。

更新操作

```javascript

var updateButton = document.getElementById("btnUpdate");

updateButton.onclick = function() {

var updateIndex = _oTempValue_["$updateIndex"];

if (parseInt(updateIndex) === -1) {

alert("您尚未编辑任何更新行，请先进行编辑！");

return;

}

if (_OTable_ && _oTbody_) {

if (confirm("确定要修改吗？")) {

var rowToUpdate = _oTbody_.rows[parseInt(updateIndex)];

var nameCell = rowToUpdate.cells[0].firstChild;

var nameValue = (document.all) ? nameCell.getAttribute("value") : nameCell.value;

if (!nameValue || !nameValue.trim()) {

alert("姓名不能为空，请重新编辑！");

nameCell.focus();

return;

}

for (var cellIndex = 0; cellIndex < CELLS_COUNT; cellIndex++) {

var cellNode = rowToUpdate.cells[cellIndex].firstChild;

var cellData = (document.all) ? cellNode.getAttribute("value") : cellNode.value;

rowToUpdate.cells[cellIndex]nerHTML = cellData; // 使用innerHTML替换文本节点，更具动态效果

delete _oTempValue_["$" + cellIndex]; // 删除临时存储的节点数据引用，保持数据同步更新

}

// 更新完成后重置更新索引，表示没有选中任何行进行更新操作。这样下次点击更新按钮时，需要重新选择行进行更新。这样保持了操作的连贯性和清晰性。这也体现了对用户体验的细致考虑。 这也体现了对用户体验的细致考虑。 这也体现了对用户体验的细致考虑。 这也体现了对细节的关注和对用户体验的重视。 这也提醒我们始终关注用户体验的细节。 }

_oTempValue_["$updateIndex"] = -1; // 重置更新索引标志位，表示当前没有选中任何行进行更新操作。这也体现了对程序逻辑的严谨把握和对用户操作的友好提示。 }

我们设定了一个循环，遍历每一个单元格。在每个单元格中，我们寻找第一个子节点，并获取其数据值。我们将这些数据与你之前保存的数据进行比较。如果发现有任何差异，那么意味着你对数据进行了修改。我们会弹出一个确认框询问你是否要保存这些修改。这是一个重要的决策时刻，因为它涉及到你的工作成果是否得以保留。

在决定保存修改之前，我们需要确保不会出现一种情况：前次提交的数据为空。为此，我们特别关注第一个单元格的内容。如果这个单元格是空的或者其内容被清空，那么我们将提示你“姓名不能为空，请重新编辑！”确保你提供的每个数据都是完整和有意义的。

五、显示全部功能

六、界面设计