基於JavaScript實現動態建立表格和增加表格行數_javascript技巧

在工作，項目需求中，有時候表格的行數不能夠滿足我們的需求，這時需要我們動態增加表格的行數，下面小編通過一段代碼執行個體給大家介紹js建立表格和增加表格的行數的方法，並且還實現了隔行變色功能。對此感興趣的朋友可以參考一下代碼：

js代碼如下所示：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>動態動作表格</title></head><body><script type="text/javascript">var n = 0;function showTable(len) { wi('<table border="1" width="300" style="border-collapse:collapse"><tbody id="table">'); for (i=0;i<len;i++)  { if (parseInt(i%2)==1) {  bg = '#F4FAC7'; } else {  bg = 'white';  } wi('<tr bgcolor='+bg+'><td>第'+(i+1)+'行</td></tr>');  } wi('</tbody></table><br />'); wi('<input type="button" value="Add" id="add" />'); }</P><P>function wi(str) { return document.write(str); }showTable(10);var add = document.getElementById("add"); add.onclick = function() { n = n+1; if (n%2==0)  { bg = '#F4FAC7'; }  else  { bg = 'white';  } var table = document.getElementById("table"); var tr = document.createElement("tr"); tr.bgColor = bg; var td = document.createElement("td"); td.innerHTML = '第'+(10+n)+'行'; tr.appendChild(td); table.appendChild(tr);}</script></body></html>

以上內容是基於JavaScript實現動態建立表格和增加表格行數的相關代碼，希望大家喜歡。