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