之前介紹過用 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>
(02)添加一個按鈕,用來點擊添加新的table行,<input type="button" class="btn btn-primary" value="原生JS添加Table行" onclick="add_tr()" />
(03)要為table添加行tr, 我們可以用document對象的createElement方法,先生成tr對象,var tr = teElement("tr");
(04)tr裏的元素是td,所以還要生成td對象,td裏的內容可以用 innerHTML來賦值,var td1 = teElement("td");rHTML = '3';一行tr有三個td,所以要生成三個td對象,每個對象的內容各自賦值
(05)把td單元格,放進tr對象,ndChild(td1);ndChild(td2);ndChild(td3);
(06)最後,把tr對象放進table,lementById('tbl')ndChild(tr);
(07)代碼邏輯基本完成,看下界面。
(08)點擊按鈕後,成功為table添加了一行。
(09)多次點擊,可以為table添加多行,如圖。