自定义行列数的隔行变色表格效果

以你之姓@ 2022-05-22 12:17 250阅读 0赞

这种效果用处不大，但是可以作为练习双层for循环和document.write()的工具．

思路如下：把

,,用document.write()输出，

把行数和列数用prompt()输入框进行输入，提高灵活性．

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>try</title>
    <style>
        .bc1{
            background-color: purple;
            color: green;
        }
        .bc2{
            background: blue;
            background-color: orange;
        }
    </style>
    <script>
        var rows = prompt('请输入行数');
        var cols = prompt('请输入列数');
        document.write("<table>");
       for(var i = 1;i <= rows; i ++){
           //判断奇偶行数
           if(i % 2 === 1){
               document.write("<tr class='bc1'>");
           }else{
               document.write("<tr class='bc2'>");
           }
           for(var j = 1;j <= cols; j ++){
               document.write("<td>"+i+"行"+j+"列</td>");
           }
           document.write("</tr>");
       }
       document.write("</table>");
    </script>
</head>
<body>
</body>
</html>