使用纯 JavaScript 实现动态表格的增删改功能教程
引言
在 Web 开发中，表格是展示数据的重要方式。有时我们需要动态地对表格进行增加、删除和修改操作，而不刷新整个页面。本文将介绍如何使用纯 JavaScript 实现一个具有增删改功能的动态表格。
准备工作
在开始之前，我们需要创建一个基本的 HTML 结构，包括一个用于显示表格的容器和一个用于添加新数据的表单。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态表格增删改</title>
<style>
table {
border-collapse: collapse;
width: 100%;
margin-bottom: 20px;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
form {
margin-bottom: 20px;
}
label {
display: inline-block;
width: 80px;
margin-bottom: 10px;
}
input[type="text"] {
width: 200px;
padding: 5px;
margin-bottom: 10px;
}
button {
padding: 5px 10px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>动态表格增删改示例</h1>
<form id="addForm">
<label for="name">姓名:</label>
<input type="text" id="name" required><br>
<label for="age">年龄:</label>
<input type="text" id="age" required><br>
<label for="city">城市:</label>
<input type="text" id="city" required><br>
<button type="submit">添加</button>
</form>
<table id="dataTable">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 表格数据将在这里动态生成 -->
</tbody>
</table>
<script src="script.js"></script>
</body>
</html>JavaScript 实现增删改功能
接下来，我们编写 JavaScript 代码来实现动态表格的增删改功能。我们将创建一个数组来存储表格数据，并使用 DOM 操作来更新表格。
// 初始化数据
let data = [
{ id: 1, name: '张三', age: 25, city: '北京' },
{ id: 2, name: '李四', age: 30, city: '上海' },
{ id: 3, name: '王五', age: 28, city: '广州' }
];
// 获取 DOM 元素
const addForm = document.getElementById('addForm');
const nameInput = document.getElementById('name');
const ageInput = document.getElementById('age');
const cityInput = document.getElementById('city');
const tableBody = document.querySelector('#dataTable tbody');
// 渲染表格
function renderTable() {
tableBody.innerHTML = '';
data.forEach(item => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${item.id}</td>
<td>${item.name}</td>
<td>${item.age}</td>
<td>${item.city}</td>
<td>
<button onclick="editRow(${item.id})">编辑</button>
<button onclick="deleteRow(${item.id})">删除</button>
</td>
`;
tableBody.appendChild(row);
});
}
// 添加新行
addForm.addEventListener('submit', function(e) {
e.preventDefault();
const newId = data.length > 0 ? Math.max(...data.map(item => item.id)) + 1 : 1;
const newItem = {
id: newId,
name: nameInput.value,
age: ageInput.value,
city: cityInput.value
};
data.push(newItem);
renderTable();
// 清空输入框
nameInput.value = '';
ageInput.value = '';
cityInput.value = '';
});
// 删除行
function deleteRow(id) {
if (confirm('确定要删除这条记录吗？')) {
data = data.filter(item => item.id !== id);
renderTable();
}
}
// 编辑行
let currentEditId = null;
function editRow(id) {
const itemToEdit = data.find(item => item.id === id);
if (itemToEdit) {
nameInput.value = itemToEdit.name;
ageInput.value = itemToEdit.age;
cityInput.value = itemToEdit.city;
currentEditId = id;
// 更改按钮文本和功能
const submitButton = addForm.querySelector('button[type="submit"]');
submitButton.textContent = '更新';
submitButton.onclick = function(e) {
e.preventDefault();
updateRow(id);
};
}
}
// 更新行
function updateRow(id) {
const itemIndex = data.findIndex(item => item.id === id);
if (itemIndex !== -1) {
data[itemIndex] = {
id: id,
name: nameInput.value,
age: ageInput.value,
city: cityInput.value
};
renderTable();
// 恢复按钮文本和功能
const submitButton = addForm.querySelector('button[type="submit"]');
submitButton.textContent = '添加';
submitButton.onclick = null;
// 清空输入框
nameInput.value = '';
ageInput.value = '';
cityInput.value = '';
currentEditId = null;
}
}
// 初始渲染表格
renderTable();代码解析
数据结构
我们使用一个数组 data 来存储表格的数据，每个数据项是一个对象，包含 id、name、age 和 city 属性。
渲染表格
renderTable 函数负责将数据数组中的数据渲染到表格中。它首先清空表格的主体部分，然后遍历数据数组，为每个数据项创建一个表格行，并将其添加到表格主体中。
添加新行
我们通过监听表单的 submit 事件来处理添加新行的操作。当用户提交表单时，我们从输入框中获取新数据，创建一个新的数据项，并将其添加到数据数组中，然后重新渲染表格。
删除行
deleteRow 函数通过接收要删除的行的 id 作为参数，从数据数组中过滤掉该数据项，然后重新渲染表格。在删除之前，会弹出一个确认对话框，以防止误删。
编辑行
editRow 函数用于编辑指定行的数据。它通过接收要编辑的行的 id 作为参数，找到对应的数据项，并将该数据项的值填充到输入框中。同时，它会更改表单提交按钮的文本和功能，使其变为更新操作。
更新行
updateRow 函数用于将修改后的数据更新到数据数组中。它通过接收要更新的行的 id 作为参数，找到该数据项在数据数组中的索引，然后用新的数据替换旧的数据，最后重新渲染表格。
总结
通过以上步骤，我们使用纯 JavaScript 实现了一个简单的动态表格增删改功能。这个示例展示了如何使用 JavaScript 操作 DOM 和处理用户交互，以实现动态更新网页内容的目的。你可以根据实际需求对代码进行扩展和优化，例如添加更多的验证、支持分页、排序等功能。