js实现table删除行实例（纯前端）
来源：互联网 发布：loadrunner java user 编辑：程序博客网 时间：2024/06/06 01:04
实例：表格下每行都有一个删除改行的操作，如何用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:;" onclick="deleteRow(this)">删除</a></td>
</tr>
<tr>
<td>xh002</td>
<td>李四</td>
<td><a href="javascript:;" onclick="deleteRow(this)">删除</a></td>
</tr>
</table>
</body>
</html>
解释“为什么要获取table节点下最后一个子节点？”：因为table下最后一个子节点是<tbody></tbody>。所以存在一个误区，table下的子节点是tr。
0 0
- js实现table删除行实例（纯前端）
- Js实现动态添加删除Table行
- js实现table新增，删除行
- jqury+js实现纯前端分业（伪分页）
- 前端模型--纯js实现手风琴accordian
- 纯js实现隔行换色实例
- JS实现table行增加行删除及元素排序
- JS添加，删除Table行
- JS 删除Table所有行
- 删除table中的一行js实现
- Table中删除Tr的JS实现
- 【转】js操作html的table,包括添加行，添加列，删除行，删除列，合并单元格（未实现）
- 前端模型--纯js实现简易日历&&电子时钟
- js 实现 table 行上移 （数据库）
- js动态增加（删除）table数据行的功能
- 使用js添加删除table行
- js控制删除table的行
- js动态添加删除table中的行
- UVa12412 - A Typical Homework (a.k.a Shi Xiong Bang Bang Mang)
- 《Go语言入门》第一个Go语言程序——HelloWorld
- C# ArrayList和Hashtable的使用
- [Async_ExceptionOccurred]参数: 调试资源字符串不可用。密钥和参数通常提供足够的信息用以诊断该问题。
- 通信课程一
- js实现table删除行实例（纯前端）
- Studio
- hdu 5587 Array
- UVALive 4683 Find The Number(容斥原理)
- UI_layoutSubView(判断横竖屏方法)
- 计算机技术领域当前的主流技术及其社会需求调查报告
- 递推与递归
- 归并排序与逆序对问题---（解题报告）POJ1804---Brainman
- setTimeout()和setInterval()看js的异步执行方法
