写一个含有增删改的表格
时间: 2023-08-31 10:24:20 浏览: 107
### 回答1:
好的,我可以回答这个问题。对于含有增删改的表格,我们可以使用 HTML 和 JavaScript 来实现。HTML 可以用来创建表格,而 JavaScript 可以用来实现增删改的功能。具体实现方法可以参考以下代码:
HTML 代码:
```
<table id="myTable">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>20</td>
<td>男</td>
<td>
<button onclick="editRow(this)">编辑</button>
<button onclick="deleteRow(this)">删除</button>
</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
<td>女</td>
<td>
<button onclick="editRow(this)">编辑</button>
<button onclick="deleteRow(this)">删除</button>
</td>
</tr>
</tbody>
</table>
<button onclick="addRow()">添加</button>
```
JavaScript 代码:
```
function addRow() {
var table = document.getElementById("myTable");
var row = table.insertRow(-1);
var nameCell = row.insertCell();
var ageCell = row.insertCell(1);
var genderCell = row.insertCell(2);
var actionCell = row.insertCell(3);
nameCell.innerHTML = "<input type='text'>";
ageCell.innerHTML = "<input type='text'>";
genderCell.innerHTML = "<input type='text'>";
actionCell.innerHTML = "<button onclick='saveRow(this)'>保存</button>";
}
function editRow(button) {
var row = button.parentNode.parentNode;
var nameCell = row.cells[];
var ageCell = row.cells[1];
var genderCell = row.cells[2];
var actionCell = row.cells[3];
var name = nameCell.innerHTML;
var age = ageCell.innerHTML;
var gender = genderCell.innerHTML;
nameCell.innerHTML = "<input type='text' value='" + name + "'>";
ageCell.innerHTML = "<input type='text' value='" + age + "'>";
genderCell.innerHTML = "<input type='text' value='" + gender + "'>";
actionCell.innerHTML = "<button onclick='saveRow(this)'>保存</button>";
}
function saveRow(button) {
var row = button.parentNode.parentNode;
var nameCell = row.cells[];
var ageCell = row.cells[1];
var genderCell = row.cells[2];
var actionCell = row.cells[3];
var name = nameCell.firstChild.value;
var age = ageCell.firstChild.value;
var gender = genderCell.firstChild.value;
nameCell.innerHTML = name;
ageCell.innerHTML = age;
genderCell.innerHTML = gender;
actionCell.innerHTML = "<button onclick='editRow(this)'>编辑</button><button onclick='deleteRow(this)'>删除</button>";
}
function deleteRow(button) {
var row = button.parentNode.parentNode;
row.parentNode.removeChild(row);
}
```
以上代码实现了一个简单的含有增删改的表格,可以根据实际需求进行修改和扩展。
### 回答2:
下面是一个包含增删改功能的表格示例:
表格名称:学生信息
编号 | 姓名 | 年龄 | 性别 | 操作
-----|------|------|-------|--------
1 | 张三 | 18 | 男 | 编辑/删除
2 | 李四 | 20 | 男 | 编辑/删除
3 | 王五 | 19 | 女 | 编辑/删除
在这个表格中,有五列分别为"编号"、"姓名"、"年龄"、"性别"和"操作"。其中"编号"列用来标识每个学生的唯一编号,"姓名"列用来显示学生的姓名,"年龄"列用来显示学生的年龄,"性别"列用来显示学生的性别。最后一列"操作"列包含了编辑和删除两个功能按钮。
增加操作:
通过表格的增加功能,可以在末尾添加新的一行学生信息。通过点击增加按钮,在空的一行中输入新学生的信息,包括编号、姓名、年龄、性别等,并且将增加按钮变为编辑/删除按钮。
删除操作:
通过表格的删除功能,可以删除指定行的学生信息。通过点击对应行的删除按钮,系统会弹出确认对话框,询问是否确认删除该行的学生信息。如果确认删除,则该行的学生信息将从表格中移除。
更改操作:
通过表格的编辑功能,可以修改指定行的学生信息。通过点击对应行的编辑按钮,系统会打开编辑对话框,显示该行学生的详细信息,包括编号、姓名、年龄、性别等。用户可以在编辑对话框中修改学生的信息,并保存修改后的内容。
通过这样一个包含增删改功能的表格,可以方便地管理学生信息,快速进行增加、删除和修改操作,提高了信息管理的效率。
阅读全文