08.01《jQuery》——隔行换色jQuery实现

Posted 2020-12-27 justlive-tears

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了08.01《jQuery》——隔行换色jQuery实现相关的知识，希望对你有一定的参考价值。

这是html代码和jQuery的触发代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="tableChangeColor_byself.css"/>
        <script src="../jquery-3.2.1/jquery-3.2.1.js"></script>
        <script src="tableChangeColor_byself.js"></script>
        <script type="text/javascript">
            $(function(){
                $("table").alterBgColor().find("th").css("color","red");
            });

        </script>
    </head>
    <body>
        <table id="table1">
            <thead>
                <tr>
                    <th> </th>
                    <th>姓名1</th>
                    <th>性别</th>
                    <th>暂住地</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" name="choice" value="" /></td>
                    <td>张三</td>
                    <td>男</td>
                    <td>新疆哈密</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="choice" value="" /></td>
                    <td>李四</td>
                    <td>女</td>
                    <td>江苏南京</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="choice" value="" checked=‘checked‘ /></td>
                    <td>王五</td>
                    <td>男</td>
                    <td>湖南长沙</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="choice" value="" /></td>
                    <td>赵六</td>
                    <td>男</td>
                    <td>浙江温州</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="choice" value="" /></td>
                    <td>冯七</td>
                    <td>男</td>
                    <td>浙江嘉兴</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="choice" value="" /></td>
                    <td>马八</td>
                    <td>男</td>
                    <td>浙江杭州</td>
                </tr>
            </tbody>
        </table>

    </body>
</html>

这是jQuery插件的代码：

;(function($) {
    $.fn.extend({
        //"隔行换色": function(options) {
        "alterBgColor": function(options) {
            //设置默认值
            options = $.extend({
                odd: "odd",
                /* 偶数行样式*/
                even: "even",
                /* 奇数行样式*/
                selected: "selected" /* 选中行样式*/
            }, options);
            //$("选择器",上下文); //如果不传第二个参数 默认上下文是 document                 从当前文档中 寻找
            //this 在当前对象下 寻找  table 
            $("tbody>tr:odd", this).addClass(options.odd);
            $("tbody>tr:even", this).addClass(options.even);
            $(‘tbody>tr‘, this).click(function() {
                //判断当前是否选中
                var hasSelected = $(this).hasClass(options.selected);

                //如果选中，则移出selected类，否则就加上selected类
                $(this)[hasSelected ? "removeClass" : "addClass"](options.selected)
                    //查找内部的checkbox,设置对应的属性。
                    .find(‘:checkbox‘).prop(‘checked‘, !hasSelected); //2.1.4 需改成prop方法
            });
            // 如果单选框默认情况下是选择的，则高色.
            $(‘tbody>tr:has(:checked)‘, this).addClass(options.selected);
            return this; //返回this，使方法可链。
        }

    });
})(jQuery);

这是其中的CSS样式代码：

table        { border:0;border-collapse:collapse;}
td    { font:normal 12px/17px Arial;padding:2px;width:100px;}
th            { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
.even        { background:#FFF38F;}  /* 偶数行样式*/
.odd        { background:#FFFFEE;}  /* 奇数行样式*/
.selected        { background:#FF6500;color:#fff;}

代码的结果为：

技术分享图片

以上是关于08.01《jQuery》——隔行换色jQuery实现的主要内容，如果未能解决你的问题，请参考以下文章

JQuery案例一：实现表格隔行换色

jQuery应用实例2：表格隔行换色

jQuery实现的table表格隔行换色代码实例

jQuery隔行换色+全选/全部选demo

jQuery实现table隔行换色和鼠标经过变色