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

以你之姓@ 2022-05-22 12:17 214阅读 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 条评论，214人围观）

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

相关阅读

相关使用CSS3实现表格隔行/隔列变色

话少说，先看效果，如果不是你想要的，你可以撤了~ ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_...

冷不防/ 2024年04月19日 15:11/ 0 赞/ 76 阅读

相关 onmouseover+onmouseout ：表格隔行变色

表格隔行变色 <!DOCTYPE html> <html lang="en"> <head> <meta charset

灰太狼/ 2023年10月03日 14:50/ 0 赞/ 31 阅读

相关 table表格，隔行，格列变色

隔行变色每隔奇数行变色一次 tr:nth-child(odd) { background-color: eee; } ![在这里插

﹏ヽ暗。殇╰゛Y/ 2023年01月19日 03:11/ 0 赞/ 31 阅读

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

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

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

相关 jquery实现隔行变色

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

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

相关 ListView隔行变色

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

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

相关隔行变色jquery 实现

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

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

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

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

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

相关 jquery表格隔行变色

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

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

相关 jQuery表格之隔行变色

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

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