JavaScript 操作table,可以新增行和列并且隔一行換背景色代碼分享

更新時(shí)間：2013年07月05日 17:05:21 作者：

這篇文章介紹了JavaScript操作table,可以新增行和列并且隔一行換背景色代碼，有需要的朋友可以參考一下

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  <title>JavaScript</title>
 </head>
 <body>
  <script language="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" />'); 
   }
   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>    

您可能感興趣的文章:

相關(guān)文章

JS前端開發(fā)模擬虛擬dom轉(zhuǎn)真實(shí)dom詳解
這篇文章主要為大家介紹了JS前端開發(fā)模擬虛擬dom轉(zhuǎn)真實(shí)dom詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01
JavaScript結(jié)合Canvas繪畫畫運(yùn)動(dòng)小球
這篇文章主要介紹了JavaScript結(jié)合Canvas畫運(yùn)動(dòng)小球，canvas被稱為畫布，可以結(jié)合javascript實(shí)現(xiàn)繪制各種圖形,制作各種炫酷的動(dòng)畫效果，下面文章更多詳細(xì)內(nèi)容介紹需要的小伙伴可以參考一下
2022-03-03
微信小程序動(dòng)態(tài)顯示項(xiàng)目倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了微信小程序動(dòng)態(tài)顯示項(xiàng)目倒計(jì)時(shí)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-06-06
javascript 正則表達(dá)式觸發(fā)函數(shù)進(jìn)行高級替換
如果在正則表達(dá)式中定義了子匹配，那么參數(shù)的長度會(huì)隨著子匹配的個(gè)數(shù)改變，如果沒有定義子匹配，那么長度是固定的。
2010-03-03
基于JavaScript實(shí)現(xiàn)圖片放大鏡功能
在一些電商網(wǎng)站上，經(jīng)常看到有商品圖片被放大查看的功能，所以本文將使用前端技術(shù)實(shí)現(xiàn)一個(gè)簡單的圖片放大鏡功能，希望能給大家?guī)硪欢ǖ膸椭?/div> 2023-06-06
mui 打開新窗口的方式總結(jié)及注意事項(xiàng)
這篇文章主要介紹了mui 打開新窗口的方式總結(jié)及注意事項(xiàng),需要的朋友可以參考下
2017-08-08
JavaScript?Generator異步過度的實(shí)現(xiàn)詳解
生成器Generator是JavaScript?ES6引入的特性，它讓我們可以分段執(zhí)行一個(gè)函數(shù)。但是在談?wù)撋善鳎℅enerator）之前，我們要先了解迭代器Iterator
2022-08-08
詳解JavaScript常量定義
本文主要對JavaScript常量定義進(jìn)行詳細(xì)介紹，具有一定的參考價(jià)值，下面跟著小編一起來看下吧
2017-01-01
編寫更好的JavaScript條件式和匹配條件的技巧(小結(jié))
這篇文章主要介紹了編寫更好的JavaScript條件式和匹配條件的技巧(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-06-06
淺析如何利用JavaScript進(jìn)行語音識(shí)別
所謂語音識(shí)別就是將你所說的轉(zhuǎn)化成文字。Chrome 瀏覽器在版本25之后開始對這一特性的支持。這篇文章將會(huì)詳細(xì)的介紹如何使用JavaScript進(jìn)行語音識(shí)別，感興趣的朋友們可以參考借鑒，下面來一起看看吧。
2016-10-10