在工作，項(xiàng)目需求中，有時(shí)候表格的行數(shù)不能夠滿足我們的需求，這時(shí)需要我們動(dòng)態(tài)的增加表格的行數(shù)，下面小編通過(guò)一段代碼實(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)代碼，希望大家喜歡。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
