最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
纯原生js实现table表格增删的教程
时间：2017-01-06 编辑：简简单单 来源：一聚教程网
公司实习生问我table的增删操作，用jQuery很简单的实现了。又问我不使用jQuery，只使用js如何实现。
面对这种情况，我的一贯做法是‘不理解，但是支持'。
jQuery用的多了，人也懒了，但还是用js实现了这一操作，觉得难点在于IE兼容。。。
只是想找代码看看的可以跳过分析过程，文章底部附有完整代码。
以下是coding过程：
HTML结构代码
一个基本的table结构，增加了一些简单的样式，三个按钮分别对应创建、清空，和一个预留。
| 代码如下 | 复制代码 |
|
table.base{
border-collapse:collapse;
text-align: center;
border: 1px solid black;
}
table, tr, td, th{
border: 1px solid black;
}
| |
构造函数（伪构造函数）
考虑过，创建一个隐藏的tr，基于此tr执行创建操作。为了不破坏HTML整体结构，决定通过js生成tr对象并append到页面中。
为了在页面加载完成后，再执行dom操作，所以将