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

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

这种效果用处不大，但是可以作为练习双层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>

发表评论取消回复

表情：

评论列表（有 0 条评论，202人围观）

还没有评论，来说两句吧...

相关阅读

相关 4.JavaScript实现表格隔行变色

css代码如下： <style> { margin: 0; padding: 0;

﹏ヽ暗。殇╰゛Y/ 2022年12月12日 04:38/ 0 赞/ 168 阅读

相关 jquery实现隔行变色

原生js var tab = document.getElementByTagName('table')[0]; var tr = tab.getElemen

青旅半醒/ 2022年08月12日 05:58/ 0 赞/ 212 阅读

相关 ListView隔行变色

ListView隔行变色也许我们工作中或用到，有的客户会要求你变换listView的颜色，这样看起来比较好看所以我就自己写了关于隔行变色的代码。不多说直接上代码：这是

深碍√TFBOYSˉ_/ 2022年07月13日 09:49/ 0 赞/ 232 阅读

相关 js 实现隔行变色

![效果图][SouthEast] -------------------- <!DOCTYPE html> <html lang="en"> <h

向右看齐/ 2022年06月17日 23:08/ 0 赞/ 199 阅读

相关 JavaScript-运算符（%）隔行变色

JavaScript\-运算符（%）\隔行变色\ 用到的知识点： %取模。感谢智能社。全部代码如下： ![这里写图片描述][SouthEast] !

古城微笑少年丶/ 2022年06月11日 06:53/ 0 赞/ 213 阅读

相关隔行变色jquery 实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

拼搏现实的明天。/ 2022年06月06日 01:18/ 0 赞/ 244 阅读

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

这种效果用处不大，但是可以作为练习双层for循环和document.write()的工具．思路如下：把<table></table>,<tr></tr>,<td></td>

以你之姓@/ 2022年05月22日 12:17/ 0 赞/ 203 阅读

相关 jquery表格隔行变色

结果如下图: ![这里写图片描述][70] <!doctype html> <html> <head> <meta http-eq

客官°小女子只卖身不卖艺/ 2022年05月21日 02:38/ 0 赞/ 232 阅读

相关 jQuery表格之隔行变色

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl

清疚/ 2021年12月10日 00:49/ 0 赞/ 333 阅读

相关 CSS控制表格隔行变色----:nth-child()选择器

![1442391-20180831151313735-234233126.gif][] <!doctype html> <html lang="en">

谁践踏了优雅/ 2021年09月29日 14:10/ 0 赞/ 347 阅读