zoukankan      html  css  js  c++  java
  • jquery表格隔行变色插件

    //插件代码
    ;(function($){ $.fn.extend({ "alterBgColor":function(options){ options = $.extend({ "odd":"odd",//偶数行的class "even":"even",//奇数行class "selected":"selected"//被点击行class },options);//传入的class参数替换默认的class设置 console.info(options) $("tbody tr:odd").addClass(options.odd);//偶数行设置class $("tbody tr:even").addClass(options.even);//奇数行设置class $("tbody tr").click(function(){//table行的点击事件 //当前点击行添加selected样式,其他行去除selected样式,end()指的是对象又为$(this),该行的radio被选中 $(this).addClass(options.selected).siblings().removeClass(options.selected).end().find(":radio").attr("checked",true); }); //页面载入时默认选中行的样式 $("table :radio:checked").closest("tr").addClass(options.selected); return this;//返回this,使方法具有可链性 } }) })(jQuery);

    样式:

            table{
                border: 1px gray solid;
                width: 500px;
                height: 400px;
                text-align: center;
                margin: 0 auto;
            }
            .odd{background-color: gainsboro;}
            .even{background-color: #FFFFEE}
            .selected{background-color:gold}

    html:

    <table>
            <thead>
            <tr>
                <th></th>
                <th>姓名</th>
                <th>性别</th>
                <th>暂住地</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td><input type="radio" name="radio"></td>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
    
            <tr>
                <td><input type="radio" name="radio"></td>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td><input type="radio" name="radio"></td>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td><input type="radio" name="radio"></td>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td><input type="radio" name="radio"></td>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td><input type="radio" name="radio"></td>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td><input type="radio" name="radio"></td>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td><input type="radio" name="radio"></td>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            </tbody>
        </table>

    <script>中的代码

    $(function(){
                $("table").alterBgColor();//调用插件,可以自己制定样式,以"{}"对象参数的方式传递
            });

    注意:页面需首先引入jquery库

      jquery的选择符可能会匹配1个或多个元素,因此,插件必须考虑这些情况。可以在插件内部调用each()方法来遍历匹配元素,然后执行相应的方法,this会依次引用每个dom元素

      如下jquery代码所示:

    ;(function($){
        $.fn.extend({
            "pluginName" : function(options){
                return this.each(function(){
                    //这里放置插件代码
                });
            }
        });
    })(jQuery);)
  • 相关阅读:
    一个整型数组里除了两个数字之外,其他的数字都出现了两次
    输入一颗二叉树的根节点,求该树的深度
    输入两个单向链表,找出它们的第一个公共结点
    java归并排序
    这样设计 Java 异常更优雅,赶紧学!
    2019 最新 Java 核心技术教程,都在这了!
    程序员加班写的代码,千万不要相信!
    为什么有些大公司技术弱爆了?
    这才是微服务划分的正确姿势,值得学习!
    为什么 Kafka 速度那么快?
  • 原文地址:https://www.cnblogs.com/zhangyanlei183/p/4040535.html
Copyright © 2011-2022 走看看