在工作,專案需求中,有時候表格的行數不能夠滿足我們的需求,這時需要我們動態的增加表格的行數,下面小編透過一段程式碼實例給大家介紹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實作動態建立表格和增加表格行數的相關程式碼,希望大家喜歡。