基于JavaScript實現(xiàn)動態(tài)創(chuàng)建表格和增加表格行數(shù)
在工作,項目需求中,有時候表格的行數(shù)不能夠滿足我們的需求,這時需要我們動態(tài)的增加表格的行數(shù),下面小編通過一段代碼實例給大家介紹js創(chuàng)建表格和增加表格的行數(shù)的方法,并且還實現(xiàn)了隔行變色功能。對此感興趣的朋友可以參考一下代碼:
js代碼如下所示:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>動態(tài)操作表格</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>
以上內(nèi)容是基于JavaScript實現(xiàn)動態(tài)創(chuàng)建表格和增加表格行數(shù)的相關(guān)代碼,希望大家喜歡。
相關(guān)文章
JavaScript使用IEEE 標(biāo)準(zhǔn)進行二進制浮點運算產(chǎn)生莫名錯誤的解決方法
javascript做帶小數(shù)的計算時,會出現(xiàn)9的循環(huán),以下方法幫助解決。2011-05-05JS實現(xiàn)重新加載當(dāng)前頁面或者父頁面的幾種方法
本文介紹了JS實現(xiàn)重新加載當(dāng)前頁面或者父頁面的幾種方法.需要的朋友可以參考下2016-11-11javascript中的nextSibling使用陷(da)阱(keng)
關(guān)于HTML/XML節(jié)點的問題,在IE中nextSibling不會返回文本節(jié)點,而chrome或者firefox等會返回文本節(jié)點2014-05-05Javascript實現(xiàn)hashcode函數(shù)實現(xiàn)對象比較與原理說明
在JavaScript中,數(shù)值的比較是比較簡單的,使用相等(==)和全等(===)符號基本上可以解決大多數(shù)非對象的比較。但是相等(==)和全等(===)符號在對象 object 的比較上,就不能滿足所有的要求了2023-06-06模擬彈出窗口效果,關(guān)閉層之前,不能選擇后面的頁內(nèi)容
模擬彈出窗口效果,關(guān)閉層之前,不能選擇后面的頁內(nèi)容...2007-02-02