JS示例26-表格新增appendChild
- 2019 年 11 月 7 日
- 筆記
一、知識要點
1、var oTbody = oTab.tBodies[0]; 2、oTd.innerHTML = oTbody.rows.length + 1;
二、源碼參考
<!DOCTYPE > <html> <head> <title></title> <meta charset="utf-8"> <script> window.onload = function() { var oTab = document.getElementById('tab1'); var oTbody = oTab.tBodies[0]; var oName = document.getElementById('name'); // 姓名 var oAge = document.getElementById('age'); // 年齡 var oAddBtn = document.getElementById('add'); // 新增（按鈕） oAddBtn.onclick = function() { var oTr = document.createElement('tr'); var oTd = document.createElement('td'); oTd.innerHTML = oTbody.rows.length + 1; // 自增ID oTr.appendChild(oTd); var oTd = document.createElement('td'); oTd.innerHTML = oName.value; oTr.appendChild(oTd); var oTd = document.createElement('td'); oTd.innerHTML = oAge.value; oTr.appendChild(oTd); oTbody.appendChild(oTr); } } </script> </head> <body> 姓名：<input type="text" name="name" id="name" value="Tom" /> 年齡： <input type="text" name="age" id="age" value="20" /> <input type="button" name="add" id="add" value="新增" /> <table id="tab1" width="300" border="1"> <thead> <td>ID</td> <td>姓名</td> <td>年齡</td> </thead> <tbody> <tr> <td>1</td> <td>Blue</td> <td>27</td> </tr> <tr> <td>2</td> <td>張三</td> <td>23</td> </tr> </tbody> </table> </body> </html>
三、運行效果
QQ20190403-085101.gif
