在这篇博客中,我们将深入了解JavaScript如何创建和操作动态表格。我们将从头开始构建一个动态表格,并逐步添加各种功能,使其能够实现数据的添加、删除和编辑。这个示例将有助于理解如何在前端开发中使用JavaScript创建交互性强大的表格。
在开始之前,确保您已经创建了一个HTML文件并添加了以下初始结构:
DOCTYPE html>
<html>
<head>
<title>JavaScript Dynamic Tabletitle>
head>
<body>
<h1>Dynamic Table Exampleh1>
<table id="myTable">
<tr>
<th>Nameth>
<th>Ageth>
<th>Actionth>
tr>
table>
<button id="addRow">Add Rowbutton>
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 = "";
ageCell.innerHTML = "";
actionCell.innerHTML = "";
}
// 添加"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 += "";
}
// ...之后的代码
script>
在这里,我们创建了"Edit"按钮,并为其添加了点击事件监听器,以便在用户点击按钮时调用saveRow
函数。此外,我们也调整了addRow
函数,以使用createElement
方法创建输入框和按钮,然后将它们附加到对应的单元格中。
现在,用户可以通过点击"Edit"按钮来编辑每一行的内容。
在这篇博客中,我们从头开始创建了一个JavaScript动态表格。我们了解了如何添加新行、删除行和编辑行,使表格更加交互性。这个案例展示了如何使用JavaScript DOM操作来创建强大的前端功能。
这只是一个起点,您可以进一步扩展这个示例,添加更多功能,如数据验证、排序、筛选等,以满足特定的需求。希望这篇博客对您在前端开发中使用JavaScript创建动态表格有所帮助。如果您有任何问题或需要更多帮助,请随时留言。
作者信息 作者 : 繁依Fanyi CSDN: https://techfanyi.blog.csdn.net 掘金:https://juejin.cn/user/4154386571867191 |