写一个在网页中点击修改表头 和表格内容的整代码
时间: 2024-03-23 07:42:15 浏览: 26
以下是一个简单的示例代码,实现了在网页中点击修改表头和表格内容的功能:
```html
<!DOCTYPE html>
<html>
<head>
<title>表格编辑</title>
<meta charset="UTF-8">
<script>
function editHeader() {
var header = document.getElementById("name");
header.innerHTML = "学生姓名";
}
function editContent() {
var row = document.getElementById("row1");
var cells = row.getElementsByTagName("td");
cells[0].innerHTML = "王五";
cells[1].innerHTML = "21";
}
</script>
</head>
<body>
<table>
<thead>
<tr>
<th id="name">姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr id="row1">
<td>张三</td>
<td>20</td>
</tr>
<tr id="row2">
<td>李四</td>
<td>22</td>
</tr>
</tbody>
</table>
<button onclick="editHeader()">编辑表头</button>
<button onclick="editContent()">编辑内容</button>
</body>
</html>
```
这个示例代码中,有两个按钮,分别对应修改表头和表格内容的功能。当用户点击“编辑表头”按钮时,会调用`editHeader`函数,将表头单元格的内容修改为“学生姓名”。当用户点击“编辑内容”按钮时,会调用`editContent`函数,将第一行数据单元格的内容修改为“王五”和“21”。
这个示例代码只是一个简单的示例,实际上可以根据需求对代码进行修改和扩展。