实现一个前端增删改查表格代码
时间: 2024-05-14 13:12:43 浏览: 7
由于您没有指定具体的数据源,我将使用一个简单的对象数组作为示例数据源:
```javascript
const users = [
{ id: 1, name: 'Alice', age: 25 },
{ id: 2, name: 'Bob', age: 30 },
{ id: 3, name: 'Charlie', age: 35 },
];
```
接下来,我们将实现增删改查表格的代码。首先,我们需要一个 HTML 表格来显示数据:
```html
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Action</th>
</tr>
</thead>
<tbody></tbody>
</table>
```
然后,我们将编写 JavaScript 代码来渲染表格并处理用户输入:
```javascript
const tbody = document.querySelector('tbody');
function renderTable() {
// 清空表格内容
tbody.innerHTML = '';
// 遍历数据源并渲染表格行
for (const user of users) {
const tr = document.createElement('tr');
const tdId = document.createElement('td');
tdId.textContent = user.id;
tr.appendChild(tdId);
const tdName = document.createElement('td');
tdName.textContent = user.name;
tr.appendChild(tdName);
const tdAge = document.createElement('td');
tdAge.textContent = user.age;
tr.appendChild(tdAge);
const tdAction = document.createElement('td');
const btnEdit = document.createElement('button');
btnEdit.textContent = 'Edit';
btnEdit.addEventListener('click', () => handleEdit(user));
tdAction.appendChild(btnEdit);
const btnDelete = document.createElement('button');
btnDelete.textContent = 'Delete';
btnDelete.addEventListener('click', () => handleDelete(user));
tdAction.appendChild(btnDelete);
tr.appendChild(tdAction);
tbody.appendChild(tr);
}
}
function handleAdd() {
// 获取新增用户的信息
const id = users[users.length - 1].id + 1;
const name = prompt('Enter name:');
const age = parseInt(prompt('Enter age:'));
// 将新用户添加到数据源
const user = { id, name, age };
users.push(user);
// 渲染表格
renderTable();
}
function handleEdit(user) {
// 获取编辑后的用户信息
const name = prompt('Enter name:', user.name);
const age = parseInt(prompt('Enter age:', user.age));
// 更新数据源中对应的用户信息
user.name = name;
user.age = age;
// 渲染表格
renderTable();
}
function handleDelete(user) {
// 从数据源中删除对应的用户
const index = users.indexOf(user);
users.splice(index, 1);
// 渲染表格
renderTable();
}
// 初始化表格
renderTable();
// 监听添加按钮的点击事件
const btnAdd = document.querySelector('#add');
btnAdd.addEventListener('click', handleAdd);
```
在上面的代码中,我们定义了四个函数: `renderTable()` 用于渲染表格, `handleAdd()` 用于添加新用户, `handleEdit(user)` 用于编辑指定用户, `handleDelete(user)` 用于删除指定用户。我们还在页面加载时调用了 `renderTable()` 函数,将初始数据源渲染到表格中。最后,我们监听了添加按钮的点击事件,并在回调函数中调用了 `handleAdd()` 函数。