用原生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
添加一個按鈕，用來點擊添加新的table行，
<input type="button" class="btn btn-primary" value="原生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對象，每個對象的內容各自賦值
05
把td單元格，放進tr對象，
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
06
最后，把tr對象放進table,
document.getElementById('tbl').appendChild(tr);
07
代碼邏輯基本完成，看下界面。
08
點擊按鈕后，成功為table添加了一行。
09
多次點擊，可以為table添加多行，如圖。
End