用原生JS脚本如何为Table添加行?

来源:酷知科普网 2.42W

之前介绍过用 Jquery为table添加行。如果你没有使用Jquery插件,或者对Jquery不熟悉,那么能用原生的JS脚本为Table添加行吗?
可以的,下面我们一起来看下怎么写。

操作方法

(01)先看下初始的table,就是二行数据(二个tr),<table id="tbl" class="table table-bordered"> <tr> <td>1</td> <td>JS</td> <td>js</td> </tr> <tr> <td>2</td> <td>JS2</td> <td>JS2</td> </tr> </table>

用原生JS脚本如何为Table添加行?

(02)添加一个按钮,用来点击添加新的table行,<input type="button" class="btn btn-primary" value="原生JS添加Table行" onclick="add_tr()" />

用原生JS脚本如何为Table添加行? 第2张

(03)要为table添加行tr, 我们可以用document对象的createElement方法,先生成tr对象,var tr = teElement("tr");

用原生JS脚本如何为Table添加行? 第3张

(04)tr里的元素是td,所以还要生成td对象,td里的内容可以用 innerHTML来赋值,var td1 = teElement("td");rHTML = &#x27;3';一行tr有三个td,所以要生成三个td对象,每个对象的内容各自赋值

用原生JS脚本如何为Table添加行? 第4张

(05)把td单元格,放进tr对象,ndChild(td1);ndChild(td2);ndChild(td3);

用原生JS脚本如何为Table添加行? 第5张

(06)最后,把tr对象放进table,lementById('tbl')ndChild(tr);

用原生JS脚本如何为Table添加行? 第6张

(07)代码逻辑基本完成,看下界面。

用原生JS脚本如何为Table添加行? 第7张

(08)点击按钮后,成功为table添加了一行。

用原生JS脚本如何为Table添加行? 第8张

(09)多次点击,可以为table添加多行,如图。

用原生JS脚本如何为Table添加行? 第9张
热门标签