2 m0 37219080 m0_37219080 于 2017.01.05 17:18 提问

用javascript 输出一个table 50行 13列

用javascript 输出一个table 50行 13列 奇数列蓝色 偶数列红色 ,鼠标滑过某一行的时候该行变紫色 离开后恢复原来的颜色

5个回答

danielinbiti
danielinbiti   Ds   Rxr 2017.01.05 17:37
 <!DOCTYPE html>
<html>
<style>
tr:nth-child(even)
{
   background:red;
}
tr:nth-child(odd)
{
   background:blue;
}
tr:hover{
   background:#D8BFD8;
}
</style>
<body>
<div id='tablecontainer'></div>
<script>
function drawTDs(colNum){
   var tds = "";
   for(var i=0;i<colNum;i++){
       tds = tds + "<td>" + i + "</td>";
   }
   return tds;
}
function drawTRs(rowNum,colNum){
   var trHTML= "";
   for(var i=0;i<rowNum;i++){
        trHTML= trHTML + "<tr>" + drawTDs(colNum) + "</tr>";
   }
   return trHTML;
}
function drawTable(rowNum,colNum){
   var trHTML= "<table border='1' cellspacing='0'>" + drawTRs(rowNum,colNum) + "</table>";
   document.getElementById("tablecontainer").innerHTML = trHTML;
}
drawTable(50,13);
</script>

</body>
</html>

LD0807
LD0807   2017.01.05 17:51
<html>
<style>
tr:nth-child(even)
{
   background:red;
}
tr:nth-child(odd)
{
   background:blue;
}
tr:hover{
   background:#A757A8;
}

</style>
<script language="JavaScript" type="text/javascript"> 
 function createTable(){ 

     var div = document.getElementById("dd"); 
     var table = document.createElement("table");//创建table 
     for(var i=1;i<51;i++){
        var row = table.insertRow();//创建一行 
        for(var j=1;j<14;j++){
            var cell = row.insertCell();//创建一个单元 
            cell.width = "150";//更改cell的各种属性
            cell.innerHTML=i+"行"+j+"列";
        }
     }
     div.appendChild(table); 
 } 
</script> 
<body onload="createTable();"> 
<div id="dd"></div> 
</body>

</html>

bjjoy2009
bjjoy2009   2017.01.05 19:13

奇数列是蓝,偶数列是红,还挺麻烦
////////////////////////////////////////////////////////

<!DOCTYPE html>





<br> #tableId td:nth-child(odd){background:blue;}<br> #tableId td:nth-child(even){background:red;}<br> #tableId tr:hover td{background:purple; }<br>
<body>
    <div id="">
        <h1 class="alert-warning">test1</h1>
    </div>
    <table border="1" cellspacing="0" cellpadding="0" id="tableId">
    </table>
    <script type="text/javascript">
        var tHtml = "<tr>";
        for(var i=0; i<13; i++){
            tHtml += "<th>h"+(i+1)+"</th>";
        }
        tHtml += "</tr>";
        for(var i=0; i<50;i++){
            tHtml += "<tr>";
            for(var j=0;j<13;j++){
                tHtml += "<td>"+j+"H"+(i+1)+"L"+"</td>";
            }
            tHtml += "</tr>";
        }
        document.getElementById("tableId").innerHTML=tHtml;
    </script>
</body>

bjjoy2009
bjjoy2009   2017.01.05 19:10

<!DOCTYPE html>





<br> #tableId td:nth-child(odd){background:blue;}<br> #tableId td:nth-child(even){background:red;}<br> #tableId tr:hover td{background:purple; }<br>
<body>
    <div id="">
        <h1 class="alert-warning">test1</h1>
    </div>
    <table border="1" cellspacing="0" cellpadding="0" id="tableId">
    </table>
    <script type="text/javascript">
        var tHtml = "<tr>";
        for(var i=0; i<13; i++){
            tHtml += "<th>h"+(i+1)+"</th>";
        }
        tHtml += "</tr>";
        for(var i=0; i<50;i++){
            tHtml += "<tr>";
            for(var j=0;j<13;j++){
                tHtml += "<td>"+j+"H"+(i+1)+"L"+"</td>";
            }
            tHtml += "</tr>";
        }
        document.getElementById("tableId").innerHTML=tHtml;
    </script>
</body>

qq_38229168
qq_38229168   2017.06.20 10:31

用for循环创的三行四列的表,用什么方法删除这张表删,求大神

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!