当前位置:主页 > 网页前端 > JavaScript代码 >

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

时间:2022-01-19 08:52:01 | 栏目:JavaScript代码 | 点击:

复制代码 代码如下:

<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>   

您可能感兴趣的文章:

相关文章