JQ/JS实现隔行换色不成功!

发布于
2015-04-26

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>使用javascript实现隔行变色</title>
</head>
    <style>
        body{
            font-size:12px;
            text-align:center;
        }
        #tbStu{
            width:260px;
            border:1px solid #666;
            background-color:#EEE;
        }
        #tbStu tr{
            line-height:23px;
        }
        #tbStu tr th{
            background-color:#EC3E3E;
            color:#FFF;
        }
        #tbStu .trOdd{
            background-color:#FFF;
        }
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <!--
     Javascript原生实现隔行变色

     <script type="text/javascript">
        window.onload = function() {
            var _TB = document.getElementById("tbStu");
            for (var i = 0; i < _TB.rows.length - 1; i++) {
                if (i % 2) {
                    _TB.rows[i].className = "trOdd";
                }
            }
        }
     </script>-->
     <script>
        $(function(){
            $("#tbStu tr:nth-child(even)").addClass('trOdd')
        })
     </script>
<body>
    <table id="tbStu" cellpadding="0" cellspacing="0">
        <tbody>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>总分</th>
            </tr>
            <tr>
                <th>A001</th>
                <th>一根火柴</th>
                <th>男</th>
                <th>0</th>
            </tr>
            <tr>
                <th>A002</th>
                <th>两根木头</th>
                <th>男</th>
                <th>55</th>
            </tr>
            <tr>
                <th>A003</th>
                <th>三朵小花</th>
                <th>女</th>
                <th>80</th>
            </tr>
            <tr>
                <th>A004</th>
                <th>四颗豆芽</th>
                <th>女</th>
                <th>40</th>
            </tr>
            <tr>
                <th>A005</th>
                <th>无尽悲伤</th>
                <th>男</th>
                <th>1</th>
            </tr>
        </tbody>
    </table>
</body>
</html>

请各位友友们支招,谢谢!

javascript jquery

阅读 3.5k

3 个回答

得票最新

社区维基

发布于
2015-04-26

✓ 已被采纳

这年头隔行换色也要用 JS 了么...都用nth-child(even)选择器了为什么不直接用 tr:nth-of-type(even) CSS选择器设置样式呢...http://jsfiddle.net/7vy6j9nc/

ouou

8.7k3718

发布于
2015-04-26

<script type="text/javascript">
        window.onload = function() {
            var doc = document,
                tab = doc.getElementById("tbStu"),
                tr = tab.getElementByTagName('tr'); 
            for (var i = 0,lng = tr.length;i < lng; i++) {
                if (i % 2) {
                    tr[i].className = "trOdd";
                }
            }
        }
     </script>

RobinTang

3.9k63761

发布于
2015-04-26

更新于
2015-04-26

你的css有问题，设置到tr就行了，不用到th，不然你的行背景被列单元格背景覆盖了，也就没生效了：

html<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>使用javascript实现隔行变色</title>
</head>
    <style>
        body{
            font-size:12px;
            text-align:center;
        }
        #tbStu{
            width:260px;
            border:1px solid #666;
            background-color:#EEE;
        }
        #tbStu tr{
            line-height:23px;
        }
        #tbStu tr{
            background-color:#EC3E3E;
            color:#FFF;
        }
        #tbStu .trOdd{
            background-color:#FFF;
            color:#000;
        }
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <!--
     Javascript原生实现隔行变色

     <script type="text/javascript">
        window.onload = function() {
            var _TB = document.getElementById("tbStu");
            for (var i = 0; i < _TB.rows.length - 1; i++) {
                if (i % 2) {
                    _TB.rows[i].className = "trOdd";
                }
            }
        }
     </script>-->
     <script>
        $(function(){
            $("#tbStu tr:nth-child(even)").addClass('trOdd')
        })
     </script>
<body>
    <table id="tbStu" cellpadding="0" cellspacing="0">
        <tbody>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>总分</th>
            </tr>
            <tr>
                <th>A001</th>
                <th>一根火柴</th>
                <th>男</th>
                <th>0</th>
            </tr>
            <tr>
                <th>A002</th>
                <th>两根木头</th>
                <th>男</th>
                <th>55</th>
            </tr>
            <tr>
                <th>A003</th>
                <th>三朵小花</th>
                <th>女</th>
                <th>80</th>
            </tr>
            <tr>
                <th>A004</th>
                <th>四颗豆芽</th>
                <th>女</th>
                <th>40</th>
            </tr>
            <tr>
                <th>A005</th>
                <th>无尽悲伤</th>
                <th>男</th>
                <th>1</th>
            </tr>
        </tbody>
    </table>
</body>
</html>

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

JQ/JS实现隔行换色不成功!

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

为什么会出现CORS error？

请问一下，如何理解reduce函数呢？