如何在每行的角度表中使用编辑和删除按钮 - Javascript

在Web开发中，显示数据表格是很常见的需求。其中，如果我们需要在每一行中添加编辑和删除按钮的话，应该怎么做呢？

以下是一份使用Javascript实现每行添加编辑和删除按钮的代码示例。

HTML代码

首先，我们需要先创建一些HTML代码，在页面中显示表格，如下所示：

<table id="angle-table">
    <thead>
        <tr>
            <th>角度 (度)</th>
            <th>编辑</th>
            <th>删除</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>30</td>
            <td><button class="edit" data-row="0">编辑</button></td>
            <td><button class="delete" data-row="0">删除</button></td>
        </tr>
        <tr>
            <td>45</td>
            <td><button class="edit" data-row="1">编辑</button></td>
            <td><button class="delete" data-row="1">删除</button></td>
        </tr>
        <tr>
            <td>90</td>
            <td><button class="edit" data-row="2">编辑</button></td>
            <td><button class="delete" data-row="2">删除</button></td>
        </tr>
        <!-- 其他行数据 -->
    </tbody>
</table>

在这段代码中，我们创建了一个名称为“angle-table”的表格，包括了一些“thead”和“tbody”元素。

thead中指定了表头的三个列，分别是“角度 (度)”，“编辑”和“删除”。

tbody中包含了具体数据，每一行的第一列为角度值，第二列为“编辑”按钮，第三列为“删除”按钮。

在编辑和删除按钮中，我们通过“data-row”属性来指定了每个按钮所在的行数，方便后续操作时查找和定位每一行。

Javascript代码

现在，我们可以在Javascript中实现编辑和删除按钮的功能了。以下是完整的代码示例：

// 获取表格对象
var table = document.getElementById("angle-table");

// 绑定编辑和删除按钮的点击事件
table.addEventListener("click", function(event) {
    if (event.target.classList.contains("edit")) { // 编辑按钮点击事件
        var row = event.target.dataset.row; // 获取所在行数
        var cell = event.target.parentNode.previousElementSibling; // 获取角度单元格对象

        // 构造一个输入框，并将它添加到单元格中
        var input = document.createElement("input");
        input.type = "number";
        input.value = cell.innerHTML;
        cell.innerHTML = "";
        cell.appendChild(input);

        // 将编辑按钮的文本改为保存
        event.target.innerHTML = "保存";
        event.target.classList.remove("edit");
        event.target.classList.add("save");
    } else if (event.target.classList.contains("save")) { // 保存按钮点击事件
        var row = event.target.dataset.row; // 获取所在行数
        var cell = event.target.parentNode.previousElementSibling; // 获取角度单元格对象

        // 获取输入框中的值，并更新单元格数据
        cell.innerHTML = event.target.parentNode.previousElementSibling.firstChild.value;

        // 将保存按钮的文本改回编辑
        event.target.innerHTML = "编辑";
        event.target.classList.remove("save");
        event.target.classList.add("edit");
    } else if (event.target.classList.contains("delete")) { // 删除按钮点击事件
        var row = event.target.dataset.row; // 获取所在行数
        table.removeChild(event.target.parentNode.parentNode); // 删除整行数据
    }
});

其中，我们通过以下步骤实现了编辑按钮的功能：

1. 获取编辑按钮所在的行数和角度单元格对象；
2. 构造一个标签，并将其添加到角度单元格对象中；
3. 将编辑按钮的文本改为“保存”，并修改按钮的类名，以便绑定“保存”按钮的事件。

在实现保存按钮的功能时，我们需要获取输入框中的值，并将其更新到角度单元格中。同时，我们还需要将保存按钮的文本改回“编辑”，并修改按钮的类名，以便绑定“编辑”按钮的事件。

最后，在删除按钮的点击事件中，我们可以根据按钮的“data-row”属性，找到对应的行并删除它。这里需要注意的是，我们需要删除掉整个标签，而不仅仅是按钮所在的标签。

预览效果

完成了以上的HTML和Javascript代码编写后，我们就可以在浏览器中预览效果了。以下是一个样例图：

结束语

通过这篇文章，我们向大家介绍了如何在每行的角度表中添加编辑和删除按钮的功能，希望可以帮助到大家。实际上，在实现数据表格的功能时，我们可以使用一些现成的JavaScript库，如jQuery和Vue，这些库可以大大简化我们的代码编写过程。