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

最新推荐文章于 2023-10-15 21:56:34 发布

lishundi

最新推荐文章于 2023-10-15 21:56:34 发布

阅读量556

点赞数 1

分类专栏： web

本文链接：https://blog.csdn.net/lishundi/article/details/80790520

版权

web 专栏收录该内容

46 篇文章 1 订阅

订阅专栏

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

思路如下：把<table></table>,<tr></tr>,<td></td>用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>

lishundi

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
自定义行列数的隔行变色表格效果

这种效果用处不大，但是可以作为练习双层for循环和document.write()的工具．思路如下：把&lt;table&gt;&lt;/table&gt;,&lt;tr&gt;&lt;/tr&gt;,&lt;td&gt;&lt;/td&gt;用document.write()输出，把行数和列数用prompt()输入框进行输入，提高灵活性．&lt;!DOCTYPE html&gt;
复制链接

扫一扫

专栏目录