js实现双行换色

152 阅读1分钟

方法三的实现方式过于复杂,其实没必要,偶的更方便简洁的实现方式,再次献上:

方法一:

效果图: Snipaste_2022-08-15_10-03-26.png

代码展示:

四个数据为一组,用2区分前半组和后半组(适用从0开始)
        for(let i = 0; i < liList.length; i++){
            if ((i % 4) < 2) {
                liList[i].style.background = "yellow"  
            } else {
                liList[i].style.background = "pink"
            }
        }

方法二:

设置循环步长为4,去分别设置颜色,前两个一种,后两个一种
        for(var i = 0; i < liList.length; i+=4) {
            liList[i].style.background = 'red'
            liList[i+1].style.background = 'red'
            liList[i+2].style.background = 'blue'
            liList[i+3].style.background = 'blue'
        }

方法三:

效果图:

Snipaste_2022-08-05_10-47-57.png

逻辑: 考的其实是数学找规律,规律找到了代码即可实现

1+2=3,
3+4=7,
5+6=11,
7+8=15,
3,7,11,15,找规律:3+(n-1)*4  
所以 3+(5-1)*4=19   19=9+10 
规律找到,再找如何从3+(1-1)*4 = 3中找到21
规律为:((3+(1-1)*4)-1)/2=1  1+1=2由此可得为12

举例:第6次双行显示统一颜色的是哪两行
3+(6-1)*4 = 23
(23-1)/2=11
11+1=12
由此可得,下两行应该是第11和12行同色

代码展示:

<html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=gb3212">  
        <title>双行显示不同的颜色</title>  
       
        <!--下面为javascript代码-->  
        <script type = "text/javascript">  
                window.onload = function color(){//窗口加载时调用  
                    var table = document.getElementById("person");//根据table的 id 属性值获得对象  
                    var rows = table.getElementsByTagName("tr");//获取table类型的tr元素的列表  
                    for(var i = 1; i <= rows.length; i++){  
                        
                        let shu = 3+(i-1)*4
                        let res = (shu-1)/2
                        if(i % 2 == 0){  
                        rows[res].style.backgroundColor = "#EAF2D3";//偶数行时背景色为#EAF2D3  
                        rows[res+1].style.backgroundColor = "#EAF2D3";//偶数行时背景色为#EAF2D3  
                        }else{
                        rows[res].style.backgroundColor = "White";//单数行时背景色为white  
                        rows[res+1].style.backgroundColor = "White";//单数行时背景色为white  
                        }
                    }  
                }  
        </script>  
        <!--下面为css代码-->  
        <style type = "text/css">  
            #person  
                {  
                    border-style:1px solid;  
                    border-color:blue;  
                    font-weight:bold;  
                    font-family:楷体,Arial, Helvetica, sans-serif;  
                    border-collapse:collapse;  
                    margin:auto;  
                }  
            #person th   
                {  
                    border:1px solid;  
                    padding:3px 7px 2px 7px;  
                    background-color:#A7C942;  
                    color:#ffffff;  
                    text-align:center;  
                }  
            #person td   
                {  
                    border-style:solid;  
                    border-width:1px;  
                    text-align:center;  
                }  
        </style>  
    </head>  
    <body>  
        <table id = "person" align = "center" width = "90%" height = "200">  
            <tr>  
                <th>姓名</th>  
                <th>性别</th>  
                <th>电话</th>  
                <th>爱好</th>  
            </tr>  
            <tr>  
                <td>张三</td>  
                <td></td>  
                <td>33333333</td>  
                <td>睡觉</td>  
            </tr>  
            <tr>  
                <td>李四</td>  
                <td></td>  
                <td>44444444</td>  
                <td>旅游</td>  
            </tr>  
            <tr>  
                <td>王五</td>  
                <td></td>  
                <td>55555555</td>  
                <td>购物</td>  
            </tr>  
            <tr>  
                <td>赵六</td>  
                <td></td>  
                <td>66666666</td>  
                <td>看书</td>  
            </tr>  
            <tr>  
                <td>王五</td>  
                <td></td>  
                <td>55555555</td>  
                <td>购物</td>  
            </tr>  
            <tr>  
                <td>赵六</td>  
                <td></td>  
                <td>66666666</td>  
                <td>看书</td>  
            </tr>   
            <tr>  
                <td>张三</td>  
                <td></td>  
                <td>33333333</td>  
                <td>睡觉</td>  
            </tr>  
            <tr>  
                <td>李四</td>  
                <td></td>  
                <td>44444444</td>  
                <td>旅游</td>  
            </tr> 
            <tr>  
                <td>张三</td>  
                <td></td>  
                <td>33333333</td>  
                <td>睡觉</td>  
            </tr>  
            <tr>  
                <td>李四</td>  
                <td></td>  
                <td>44444444</td>  
                <td>旅游</td>  
            </tr>  
            <tr>  
                <td>王五</td>  
                <td></td>  
                <td>55555555</td>  
                <td>购物</td>  
            </tr> 
        </table>  
    </body>  
</html>

参考原链接:www.iteye.com/blog/lwcumt…