请编写一个如图7-34所示的学生信息页面,当用户单击“删除”链接时,可以删除整行。
时间: 2024-03-18 10:39:40 浏览: 155
很抱歉,我无法直接呈现图像。但我可以提供一个基本的HTML和JavaScript代码示例,您可以根据需要进行修改。
HTML代码:
```
<table id="student-table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>20</td>
<td>Male</td>
<td><a href="#" onclick="deleteRow(this)">Delete</a></td>
</tr>
<tr>
<td>Jane Smith</td>
<td>22</td>
<td>Female</td>
<td><a href="#" onclick="deleteRow(this)">Delete</a></td>
</tr>
<tr>
<td>Bob Johnson</td>
<td>21</td>
<td>Male</td>
<td><a href="#" onclick="deleteRow(this)">Delete</a></td>
</tr>
</tbody>
</table>
```
JavaScript代码:
```
function deleteRow(link) {
var row = link.parentNode.parentNode;
row.parentNode.removeChild(row);
}
```
说明:
1. 在HTML中,我们使用`<table>`元素来创建表格,并使用`<thead>`和`<tbody>`元素来分别定义表头和表体。
2. 在表头中,我们定义了四个列,分别是“Name”、“Age”、“Gender”和“Action”。
3. 在表体中,我们定义了三行数据,每行数据有四列。在第四列中,我们使用`<a>`元素创建一个“Delete”链接,并且在`onclick`属性中调用`deleteRow()`函数。
4. 在JavaScript中,`deleteRow()`函数接收一个参数`link`,该参数是用户单击的链接对象。
5. 首先,我们使用`parentNode`属性获取链接所在的`<td>`元素,再使用`parentNode`属性获取该`<td>`元素所在的`<tr>`元素。
6. 最后,我们使用`removeChild()`方法从表格中删除该行数据。