用原生JS脚本如何为Table添加行？ _小知识

之前介绍过用 Jquery为table添加行。如果你没有使用Jquery插件，或者对Jquery不熟悉，那么能用原生的JS脚本为Table添加行吗?<br/>可以的，下面我们一起来看下怎么写。操作方法 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>

文章插图

02 【用原生JS脚本如何为Table添加行？】添加一个按钮，用来点击添加新的table行，
<input type="button" class="btn btn-primary" value=https://vvvtt.com/article/"原生JS添加Table行" onclick="add_tr()" />

文章插图

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

文章插图

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