【Java 进阶篇】JavaScript 动态表格案例

在这里插入图片描述

在这篇博客中，我们将深入了解JavaScript如何创建和操作动态表格。我们将从头开始构建一个动态表格，并逐步添加各种功能，使其能够实现数据的添加、删除和编辑。这个示例将有助于理解如何在前端开发中使用JavaScript创建交互性强大的表格。

准备工作

在开始之前，确保您已经创建了一个HTML文件并添加了以下初始结构：

<!DOCTYPE html>
<html>
<head><title>JavaScript Dynamic Table</title>
</head>
<body><h1>Dynamic Table Example</h1><table id="myTable"><tr><th>Name</th><th>Age</th><th>Action</th></tr></table><button id="addRow">Add Row</button>
</body>
</html>

我们的HTML文件包含一个空的表格和一个"Add Row"按钮。

创建基本的动态表格

首先，我们需要添加JavaScript代码来创建基本的动态表格。我们将使用DOM操作来实现这一点。

<script>// 获取表格元素const table = document.getElementById("myTable");// 创建表头const header = table.createTHead();const headerRow = header.insertRow(0);const headerName = headerRow.insertCell(0);const headerAge = headerRow.insertCell(1);const headerAction = headerRow.insertCell(2);headerName.innerHTML = "Name";headerAge.innerHTML = "Age";headerAction.innerHTML = "Action";
</script>

在这段代码中，我们首先获取了表格元素，然后使用createTHead方法创建表头，并插入表头行和表头单元格。我们为表头添加了"Name"、"Age"和"Action"列。

接下来，我们来创建一个用于添加新行的函数：

<script>// ...之前的代码// 创建函数以添加新行function addRow() {const newRow = table.insertRow(-1);const nameCell = newRow.insertCell(0);const ageCell = newRow.insertCell(1);const actionCell = newRow.insertCell(2);nameCell.innerHTML = "<input type='text'>";ageCell.innerHTML = "<input type='number'>";actionCell.innerHTML = "<button οnclick='deleteRow(this)'>Delete</button>";}// 添加"Add Row"按钮的点击事件监听器document.getElementById("addRow").addEventListener("click", addRow);
</script>

在这里，我们创建了一个名为addRow的函数，它用于添加新的行。在新的行中，我们插入了文本输入框（用于输入姓名）、数字输入框（用于输入年龄）和一个"Delete"按钮，点击该按钮将删除该行。

还添加了一个点击事件监听器，当"Add Row"按钮被点击时，将调用addRow函数。

删除行

下一步是实现删除行的功能。我们需要创建一个deleteRow函数，它将在点击"Delete"按钮时触发。

<script>// ...之前的代码// 创建函数以删除行function deleteRow(button) {const row = button.parentElement.parentElement;table.deleteRow(row.rowIndex);}
</script>

在这个函数中，我们首先获取到"Delete"按钮的父元素（即行），然后使用deleteRow方法删除该行。

编辑行

要使表格更加交互性，让我们添加一个编辑功能。我们将允许用户点击某一行的"Edit"按钮来编辑该行的内容。我们需要在addRow函数中为每一行添加一个"Edit"按钮，并创建一个用于保存编辑内容的函数。

<script>// ...之前的代码// 创建函数以保存编辑的内容function saveRow(button) {const row = button.parentElement.parentElement;const nameInput = row.cells[0].querySelector("input");const ageInput = row.cells[1].querySelector("input");const editButton = row.cells[2].querySelector("button");if (editButton.textContent === "Save") {nameInput.setAttribute("disabled", true);ageInput.setAttribute("disabled", true);editButton.textContent = "Edit";} else {nameInput.removeAttribute("disabled");ageInput.removeAttribute("disabled");editButton.textContent = "Save";}}
</script>

在这个函数中，我们首先获取了行中的输入框和"Edit"按钮。如果"Edit"按钮文字本身不同，我们将输入框的disabled属性设置为true，这将使输入框变为只读状态，同时将"Edit"按钮的文本更改为"Save"，以表示当前用户正在编辑。

如果用户再次点击"Save"按钮，我们将取消输入框的只读状态，使用户可以编辑文本，并将"Save"按钮的文本更改为"Edit"，以表示用户完成了编辑。

接下来，我们需要更新addRow函数，以添加"Edit"按钮并为其添加点击事件监听器：

<script>// ...之前的代码// 创建函数以添加新行function addRow() {const newRow = table.insertRow(-1);const nameCell = newRow.insertCell(0);const ageCell = newRow.insertCell(1);const actionCell = newRow.insertCell(2);const nameInput = document.createElement("input");const ageInput = document.createElement("input");const editButton = document.createElement("button");editButton.textContent = "Edit";editButton.onclick = function() {saveRow(this);};nameCell.appendChild(nameInput);ageCell.appendChild(ageInput);actionCell.appendChild(editButton);actionCell.innerHTML += " ";actionCell.innerHTML += "<button οnclick='deleteRow(this)'>Delete</button>";}// ...之后的代码
</script>