1. 首頁 > 生活百科 > >

用原生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>

用原生JS腳本如何為Table添加行？



02 【用原生JS腳本如何為Table添加行？】添加一個按鈕 ， 用來點擊添加新的table行 ，
<input type="button" class="btn btn-primary" value=https://vvvtt.com/article/"原生JS添加Table行" onclick="add_tr()" />

用原生JS腳本如何為Table添加行？



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

用原生JS腳本如何為Table添加行？



04 tr里的元素是td ， 所以還要生成td對象 ， td里的內容可以用 innerHTML來賦值 ，
var td1 = document.createElement("td");
td1.innerHTML = '3';
一行tr有三個td ， 所以要生成三個td對象 ， 每個對象的內容各自賦值

用原生JS腳本如何為Table添加行？



05 把td單元格 ， 放進tr對象 ，
tr.appChild(td1);
tr.appChild(td2);
tr.appChild(td3);

用原生JS腳本如何為Table添加行？



06 最后 ， 把tr對象放進table,
document.getElementById('tbl').appChild(tr);

用原生JS腳本如何為Table添加行？



07 代碼邏輯基本完成 ， 看下界面 。

用原生JS腳本如何為Table添加行？



08 點擊按鈕后 ， 成功為table添加了一行 。

用原生JS腳本如何為Table添加行？



09 多次點擊 ， 可以為table添加多行 ， 如圖 。

用原生JS腳本如何為Table添加行？





以上內容就是用原生JS腳本如何為Table添加行？的內容啦 ， 希望對你有所幫助哦！

    猜你喜歡