HTML對錶格隔行變色

js版：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script>
            window.onload = function(){
                //1.獲取表格
                var tblEle = document.getElementById("tb1");
                //2.獲取表格中tbody裡面的行數(長度)
                var len = tblEle.tBodies[0 
].rows.length;
                //alert(len);
                //3.對tbody裡面的行進行遍歷
                for(var i=0;i<len;i++){
                    if(i%2==0){
                        //4.對偶數行設定背景顏色
                        tblEle.tBodies[0].rows[i].style.backgroundColor="pink";
                    }else{
                        //5.對奇數行設定背景顏色 

                        tblEle.tBodies[0].rows[i].style.backgroundColor="gold";
                    }
                }
            }
        </script>
    </head>
    <body>
        <table border="1" width="500" height="50" align="center" id="tb1">
        <thead>
            <tr 
>
                <th>編號</th>
                <th>姓名</th>
                <th>年齡</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>小明</td>
                <td>19</td>
            </tr>
            <tr>
                <td>2</td>
                <td>小x</td>
                <td>120</td>
            </tr>
            <tr>
                <td>3</td>
                <td>小z</td>
                <td>129</td>
            </tr>
        </tbody>
        </table>
    </body>
</html>

jquery版：

<script>
            //1.頁面載入
            $(function(){
                /*//2.獲取tbody下面的偶數行並設定背景顏色
                $("tbody tr:even").css("background-color","yellow");
                //3.獲取tbody下面的奇數行並設定背景顏色
                $("tbody tr:odd").css("background-color","green");*/

                //2.獲取tbody下面的偶數行並設定背景顏色
                $("tbody tr:even").addClass("even");
                $("tbody tr:even").removeClass("even");
                //3.獲取tbody下面的奇數行並設定背景顏色
                $("tbody tr:odd").addClass("odd");
            });
        </script>

HTML對錶格隔行變色

HTML對錶格隔行變色

利用easyui實現對錶格的行編輯，增加行和修改行

HTML tr隔行變色

JavaScript例子2-使一個特定的表格隔行變色

隔行變色

jquery實現隔行變色

easyui datagrid 隔行變色

利用jQuery實現表格的隔行變色、高亮顯示

table 隔行變色

表格隔行變色

Vue.js 的一個小技巧---利用v-for中的index值，來實現隔行變色

js控制表格隔行變色

table表格隔行變色

隔行變色和高亮顯示

使用webpack打包js檔案(隔行變色案例)

java匯入excle表格，並且對錶格進行相應的修改，並對錶格資料進行整理，最後匯出本地表格等一系列操作

通過節點操作，實現隔行變色效果

JavaScript for迴圈實現表格隔行變色

小程式---資料列表隔行變色

jQuery對錶格的應用

HTML對錶格隔行變色

相關推薦