WEB开发技术

用jquery控制表格奇偶行及活动行颜色

  虽然jquery流行已经很多年了,一直都感觉很难,也没有花时间去学习它,只是偶尔哪天心血来潮了去看一点点,时隔多日又会忘得一干二净。最近用到表格奇偶行不同色,不得不去再看jquery,虽然感觉还是难,但已经不像以前一样无从下手了。做完后不得不来感叹一下jquery真是太牛了,不用自己再写一大堆javascript函数去实现了,简单几句轻松搞定。
  先定义好表格的奇偶行样式,如下代码:

body {
    font-size:12px;
}

th {
    color: #FFFFFF;
    background: #A172AC;
}

table,table td,table th {
    padding: 0.5em;
    margin: 0;
    border:0;
    border-spacing:0;
}
/* odd items 1,3,5,7,... */
table tbody tr.odd,
.odd {
    background: #FBD106;
}

/* even items 2,4,6,8,... */
table tbody tr.even,
.even {
    background: #E6453B;
}

/* hovered items */
.odd:hover,
.even:hover,
.hover {
    background: #4BB747;
    color: #FFFFFF;
}

再就是页面代码了:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>用jquery实现table奇偶行不同色</title>
    <link href="style/mysql.css" rel="stylesheet" />
    <script src="javascript/jquery-1.7.2.min.js"></script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            //排除th标签,th可能是有自己特有的样式,所以定义th样式。
            //$("tr:not(:has(th)):odd").addClass("odd");
            //$("tr:not(:has(th)):even").addClass("even");
            $("tr:odd").addClass("odd");
            $("tr:even").addClass("even");
            //如果CSS中不定义".odd:hover"和".even:hover"就需要toggleClass()。
            /*
            $("tr").mouseover(function () {
                $(this).toggleClass(".hover");
            });
            $("tr").mouseout(function () {
                $(this).toggleClass(".hover");
            });
            */
        });
    </script>
</head>
<body>
    <div id="outline">
        <table>
            <tr id="tth">
                <th>data</th>
                <th>data</th>
                <th>data</th>
                <th>data</th>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td>data</td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td>data</td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td>data</td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td>data</td>
            </tr>
        </table>
    </div>
</body>
</html>

 如果不需要鼠标事件,只需奇偶行不同色直接可以用CSS搞定。

            table tr:nth-child(even) td,
            table tr:nth-child(even) th {
                background-color: #FBD106;
            }

            table tr:nth-child(odd) td,
            table tr:nth-child(odd) th {
                background-color: #E6453B;
            }

 

 

未经允许不得转载:WEB2.0开发设计 » 用jquery控制表格奇偶行及活动行颜色
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

大前端WP主题 更专业 更方便

联系我们联系我们