码迷,mamicode.com
首页 > Web开发 > 详细

使一个特定的表格隔行变色(引自锋利的jQuery)

时间:2014-07-30 23:41:35      阅读:308      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   java   io   for   cti   

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="generator" content="editplus" />
    <title>使一个特定的表格隔行变色</title>
    <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
    <!--<script type="text/javascript">(function () { alert("函数已被调用!"); })();</script>-->
    <!--
        思路:
        1. 根据表格id获取表格。
        2. 在表格内获取<tbody>元素。
        3. 在<tbody>元素下获取<tr>元素。
    4. 循环输出获取的<tr>元素。
    5. 对<tr>元素的索引值除以2并取模,然后根据奇偶设置不同的背景色。
    -->
</head>
<body>
    <table id="tb">
        <tbody>
            <tr><td>第一行</td><td>第一行</td></tr>
            <tr><td>第二行</td><td>第二行</td></tr>
            <tr><td>第三行</td><td>第三行</td></tr>
            <tr><td>第四行</td><td>第四行</td></tr>
            <tr><td>第五行</td><td>第五行</td></tr>
        </tbody>
    </table>
    <script type="text/javascript">
        //传统方法:
        //var item = document.getElementById("tb"); //获取id为tb的元素(table)
        //var tbody = item.getElementsByTagName("tbody")[0]; //获取表格的第一个tbody元素
        //var trs = tbody.getElementsByTagName("tr"); //获取tbody元素下的所有tr元素
        //for (var i = 0; i < trs.length; i++)               //循环tr元素
        //{
        //    if (i % 2 == 0)          //取模(取余数。例如0%2==0,1%2==1,2%2==0)
        //    {
        //        trs[i].style.backgroundColor = "#888";  //改变符合条件的tr元素的背景色
        //    }
        //}

        //jQuery方法:
        $(#tb tbody tr:even).css("backgroundColor", "#888");
        //获取id为tb的元素,然后寻找它下面的tbody标签,再寻找tbody下索引值是偶数的tr元素,改变它的背景色
        //css("property","value");用来设置jQuery对象的样式
    </script>
</body>
</html>

 

使一个特定的表格隔行变色(引自锋利的jQuery),布布扣,bubuko.com

使一个特定的表格隔行变色(引自锋利的jQuery)

标签:style   blog   http   color   java   io   for   cti   

原文地址:http://www.cnblogs.com/hellowzl/p/3879442.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!