用js给表格写一个增删改查
时间: 2023-12-30 14:06:52 浏览: 26
下面是一个使用 JavaScript 实现的表格增删改查的示例代码:
HTML 代码:
```html
<table id="myTable">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Alice</td>
<td>18</td>
<td>
<button class="editBtn">编辑</button>
<button class="deleteBtn">删除</button>
</td>
</tr>
<tr>
<td>2</td>
<td>Bob</td>
<td>20</td>
<td>
<button class="editBtn">编辑</button>
<button class="deleteBtn">删除</button>
</td>
</tr>
</tbody>
</table>
<button id="addBtn">添加</button>
```
JavaScript 代码:
```javascript
// 获取表格和按钮元素
const myTable = document.querySelector('#myTable');
const addBtn = document.querySelector('#addBtn');
// 添加按钮点击事件
addBtn.addEventListener('click', () => {
// 创建新行并添加到表格末尾
const newRow = myTable.insertRow();
newRow.innerHTML = `
<td></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td>
<button class="saveBtn">保存</button>
<button class="cancelBtn">取消</button>
</td>
`;
// 设置新行的 ID
const rowCount = myTable.rows.length;
newRow.cells[0].innerText = rowCount - 1;
// 保存按钮点击事件
const saveBtn = newRow.querySelector('.saveBtn');
saveBtn.addEventListener('click', () => {
// 获取输入的表格内容
const id = newRow.cells[0].innerText;
const name = newRow.cells[1].innerText;
const age = newRow.cells[2].innerText;
// 创建新的表格行
const newTr = document.createElement('tr');
newTr.innerHTML = `
<td>${id}</td>
<td>${name}</td>
<td>${age}</td>
<td>
<button class="editBtn">编辑</button>
<button class="deleteBtn">删除</button>
</td>
`;
// 替换新行和保存按钮
myTable.replaceChild(newTr, newRow);
// 添加编辑和删除按钮点击事件
const editBtn = newTr.querySelector('.editBtn');
const deleteBtn = newTr.querySelector('.deleteBtn');
editBtn.addEventListener('click', editRow);
deleteBtn.addEventListener('click', deleteRow);
});
// 取消按钮点击事件
const cancelBtn = newRow.querySelector('.cancelBtn');
cancelBtn.addEventListener('click', () => {
// 移除新行
myTable.deleteRow(rowCount - 1);
});
});
// 编辑按钮点击事件
function editRow() {
// 获取表格行和原始数据
const tr = this.parentNode.parentNode;
const id = tr.cells[0].innerText;
const name = tr.cells[1].innerText;
const age = tr.cells[2].innerText;
// 创建编辑表单
const editForm = document.createElement('tr');
editForm.innerHTML = `
<td>${id}</td>
<td contenteditable="true">${name}</td>
<td contenteditable="true">${age}</td>
<td>
<button class="saveBtn">保存</button>
<button class="cancelBtn">取消</button>
</td>
`;
// 替换表格行和编辑按钮
myTable.replaceChild(editForm, tr);
// 绑定保存和取消按钮点击事件
const saveBtn = editForm.querySelector('.saveBtn');
const cancelBtn = editForm.querySelector('.cancelBtn');
saveBtn.addEventListener('click', saveRow);
cancelBtn.addEventListener('click', cancelEdit);
}
// 保存按钮点击事件
function saveRow() {
// 获取编辑表单元素和输入数据
const editForm = this.parentNode.parentNode;
const id = editForm.cells[0].innerText;
const name = editForm.cells[1].innerText;
const age = editForm.cells[2].innerText;
// 创建新的表格行
const newTr = document.createElement('tr');
newTr.innerHTML = `
<td>${id}</td>
<td>${name}</td>
<td>${age}</td>
<td>
<button class="editBtn">编辑</button>
<button class="deleteBtn">删除</button>
</td>
`;
// 替换编辑表单和保存按钮
myTable.replaceChild(newTr, editForm);
// 绑定编辑和删除按钮点击事件
const editBtn = newTr.querySelector('.editBtn');
const deleteBtn = newTr.querySelector('.deleteBtn');
editBtn.addEventListener('click', editRow);
deleteBtn.addEventListener('click', deleteRow);
}
// 取消按钮点击事件
function cancelEdit() {
// 获取编辑表单元素和原始数据
const editForm = this.parentNode.parentNode;
const id = editForm.cells[0].innerText;
const name = editForm.cells[1].innerText;
const age = editForm.cells[2].innerText;
// 创建新的表格行
const newTr = document.createElement('tr');
newTr.innerHTML = `
<td>${id}</td>
<td>${name}</td>
<td>${age}</td>
<td>
<button class="editBtn">编辑</button>
<button class="deleteBtn">删除</button>
</td>
`;
// 替换编辑表单和取消按钮
myTable.replaceChild(newTr, editForm);
// 绑定编辑和删除按钮点击事件
const editBtn = newTr.querySelector('.editBtn');
const deleteBtn = newTr.querySelector('.deleteBtn');
editBtn.addEventListener('click', editRow);
deleteBtn.addEventListener('click', deleteRow);
}
// 删除按钮点击事件
function deleteRow() {
// 获取表格行并移除
const tr = this.parentNode.parentNode;
myTable.deleteRow(tr.rowIndex);
}
```
以上代码实现了以下功能:
- 点击“添加”按钮可以在表格最后添加一行新数据。
- 点击“编辑”按钮可以对表格中的数据进行修改。
- 点击“保存”按钮可以保存修改后的数据。
- 点击“取消”按钮可以取消当前的修改操作。
- 点击“删除”按钮可以删除当前行的数据。