实例:表格下每行都有一个删除改行的操作,如何用js实现前端界面效果
实例代码如下:
<!DOCTYPE html><html>
<head>
<title> test </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
function deleteRow(obj){
var tbody = document.getElementById('table').lastChild;//为什么要获取table节点下最后一个子节点?
var tr = obj.parentNode.parentNode;
tbody.removeChild(tr);
}
</script>
</head>
<body>
<table border="1" width="50%" id="table">
<tr>
<th>学号</th>
<th>姓名</th>
<th>操作</th>
</tr>
<tr>
<td>xh001</td>
<td>张三</td>
<td><a href="javascript:;" οnclick="deleteRow(this)">删除</a></td>
</tr>
<tr>
<td>xh002</td>
<td>李四</td>
<td><a href="javascript:;" οnclick="deleteRow(this)">删除</a></td>
</tr>
</table>
</body>
</html>
解释“为什么要获取table节点下最后一个子节点?”:因为table下最后一个子节点是<tbody></tbody>。所以存在一个误区,table下的子节点是tr。