• jQuery 插件 表格高亮显示选中行 全选、反选(四种模式)


    <title>jquery表格修饰:隔行换色,点击变色,多选单选变色</title>
    <script language=javascript src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <style>
    .dataTable 
    { border-top: 1px solid #009286; border-right: 1px solid #009286; border-bottom: 1px solid #009286;}
    .dataTable thead tr
    {background:url(../images/topBar_bg.gif); font-weight:bold; text-align:center;}
    .dataTable tbody tr td
    {text-align:left; margin:0px; padding:8px; white-space:nowrap;}
    .dataTable .null
    {margin:0px; padding:0px;}
    .dataTable tbody tr
    {line-height: 120%;}
    .dataTable .even
    { background:#E1F4EE;}     /* 偶数行样式 E1F4EE*/
    .dataTable .odd
    { background:#E1F4EE;}      /* 奇数行样式 E1F4EE*/
    .dataTable .over
    {background:#CCCC99;}      /* 鼠标掠过行样式 CCCC99*/
    .dataTable .selected
    { background:#6F4DFF;color:#ffffff;} /* 选中行样式 BFDFFF*/
    </style>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
        
    /* 
        jQuery实现点击复选框即高亮显示选中行 全选、反选 
        详见http://www.cnblogs.com/chengulv/archive/2012/02/25/2368055.html
        
    */
        (
    function ($) {
            $.fn.extend({
                
    "alterBgColor"function (options) {
                    
    var prevselitem = null;
                    
    //设置默认值
                    options = $.extend({
                        style: 
    "4",
                        odd: 
    "odd"/* 偶数行样式*/
                        even: 
    "even"/* 奇数行样式*/
                        over: 
    "over"/* 鼠标掠过*/
                        selected: 
    "selected" /* 选中行样式*/
                    }, options);
                    
    //交替背景
                    $("tbody>tr:odd"this).addClass(options.odd);
                    $(
    "tbody>tr:even"this).addClass(options.even);
                    
    //鼠标移动背景
                    $("tbody>tr"this).hover(function () { $(this).addClass(options.over); }, function () { $(this).removeClass(options.over); });
                    
    //初始背景 (判断第一列中有被选中的话就高亮)
                    $("tbody>tr td:first-child:has(:checked)"this).parents('tr').addClass(options.selected);

                    
    //样式1
                    if (options.style == "1") {
                        $(
    "tbody>tr"this).click(function () { $(this).toggleClass(options.selected); });
                    }

                    
    //样式2
                    if (options.style == "2") {
                        $(
    'tbody>tr'this).click(function () {
                            
    //判断当前是否选中
                            var hasSelected = $(this).hasClass(options.selected);
                            
    //如果选中,则移出selected类,否则就加上selected类
                            $(this)[hasSelected ? "removeClass" : "addClass"](options.selected)
                            
    //查找内部的checkbox,设置对应的属性。
                        .find(':checkbox:first').attr('checked'!hasSelected);
                        });
                    }

                    
    //样式3
                    if (options.style == "3") {
                        
    // 如果单选框默认情况下是选择的,则高色.
                        $('tbody>tr'this).click(function () {
                            $(
    this).siblings().removeClass(options.selected); //除掉同胞的样式。
                            $(this).addClass(options.selected).find(':radio:first').attr('checked'true);
                        });
                    }

                    
    //样式4
                    if (options.style == "4") {
                        
    //第一列 为多选
                        $('tbody>tr td:first-child'this).click(function () {
                            
    var p = $(this).parents("tr");
                            
    var hasSelected = p.hasClass(options.selected);
                            p[hasSelected 
    ? "removeClass" : "addClass"](options.selected).find(':checkbox:first').attr('checked'!hasSelected);
                        });
                        
    //其他列 为单选
                        $('tbody>tr td:not(:first-child)'this).click(function () {
                            
    var p = $(this).parents("tr");
                            p.addClass(options.selected).siblings().removeClass(options.selected).find(
    ':checkbox:first').attr('checked'false);
                            p.find(
    ':checkbox:first').attr('checked'true);
                        });
                    }


                    
    //表头中的checkbox (全选 反选)
                    $("thead>tr th:first-child :checkbox:first"this).click(function () {
                        
    //判断当前是否选中
                        var hasSelected = $(this).attr("checked");
                        
    //如果选中,则移出selected类,否则就加上selected类
                        var tab = $(this).parents("table");
                        tab.find(
    "tbody>tr")[!hasSelected ? "removeClass" : "addClass"](options.selected);
                        tab.find(
    'tbody>tr td:first-child :checkbox').attr("checked", hasSelected ? true : false);

                    });
                    
    return this;  //返回this,使方法可链。
                }
            });
        })(jQuery);


        $(document).ready(
    function () {
            $(
    ".dataTable").alterBgColor({ style: "4" }).find("th").css("color""red"); //可以链式操作
        });
     
    //-->
    </SCRIPT>
     
     


    <!-- demo1 -->
    <h1>Demo1--隔行,滑动,点击 变色.</h1>
    <table class="dataTable">
    <thead>
    <tr>
     <th><input type="checkbox" name="tablechoice1" value=""/>全选</th>
     <th>性别</th>
     <th>暂住地</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>张山</td>
     <td>男</td>
     <td>浙江宁波</td>
    </tr>
    <tr>
     <td>李四</td>
     <td>女</td>
     <td>浙江杭州</td>
    </tr>
    <tr>
     <td>王五</td>
     <td>男</td>
     <td>湖南长沙</td>
    </tr>
    <tr>
     <td>找六</td>
     <td>男</td>
     <td>浙江温州</td>                           
    </tr>
    <tr>
     <td>Rain</td>
     <td>男</td>
     <td>浙江杭州</td>
    </tr>
    <tr>
     <td>MAXMAN</td>
     <td>女</td>
     <td>浙江杭州</td>
    </tr>
    </tbody>
    </table>
    <!-- demo2 -->
    <h1>Demo2--隔行,滑动,点击 变色.+  多选框选中的行 变色.</h1>
    <table class="dataTable">
    <thead>
    <tr>
     <th><input type="checkbox" name="tablechoice1" value=""/><input type="checkbox" name="tablechoice1" value=""/>全选</th>
    <th>姓名</th>
     <th>性别</th>
     <th>暂住地</th>
    </tr>
    </thead>
    <tbody>
    <tr>
     <td><input type="checkbox" name="tablechoice1" value="" /></td>
       <td>张山</td>
     <td>男</td>
     <td>浙江宁波</td>
    </tr>
    <tr>
     <td><input type="checkbox" name="tablechoice1" value="" /></td>
       <td>李四</td>
     <td>女</td>
     <td>浙江杭州</td>
    </tr>
    <tr>
     <td><input type="checkbox" name="tablechoice1" value="" checked/></td>
        <td>王五</td>
     <td>男</td>
     <td>湖南长沙</td>
    </tr>
    <tr>
     <td><input type="checkbox" name="tablechoice1" value="" /></td>
      <td>找六</td>
     <td>男</td>
     <td>浙江温州</td>
    </tr>
    <tr>
     <td><input type="checkbox" name="tablechoice1" value="" /></td>
       <td>Rain</td>
     <td>男</td>
     <td>浙江杭州</td>
    </tr>
    <tr>
     <td><input type="checkbox" name="tablechoice2" value="" checked/></td>
     <td>MAXMAN</td>
     <td>女</td>
     <td>浙江杭州</td>
    </tr>
    </tbody>
    </table>
     
    <!-- demo3 -->
    <h1>Demo3--隔行,滑动,点击 变色.+  单选框选中的行 变色.</h1>
    <table class="dataTable">
    <thead>
    <tr>
     <th> </th>
    <th>姓名</th>
     <th>性别</th>
     <th>暂住地</th>
    </tr>
    </thead>
    <tbody>
    <tr>
     <td><input type="radio" name="tablechoice" value=""/></td>
       <td>张山</td>
     <td>男</td>
     <td>浙江宁波</td>
    </tr>
    <tr>
     <td><input type="radio" name="tablechoice" value="" /></td>
       <td>李四</td>
     <td>女</td>
     <td>浙江杭州</td>
    </tr>
    <tr>
     <td><input type="radio" name="tablechoice" value="" checked /></td>
        <td>王五</td>
     <td>男</td>
     <td>湖南长沙</td>
    </tr>
    <tr>
     <td><input type="radio" name="tablechoice" value="" /></td>
      <td>找六</td>
     <td>男</td>
     <td>浙江温州</td>
    </tr>
    <tr>
    <td><input type="radio" name="tablechoice" value="" /></td>
       <td>Rain</td>
     <td>男</td>
     <td>浙江杭州</td>
    </tr>
    <tr>
     <td><input type="radio" name="tablechoice" value="" /></td>
     <td>MAXMAN</td>
     <td>女</td>
     <td>浙江杭州</td>
    </tr>
    </tbody>
    </table>

  • 相关阅读:
    Celery
    Xadmin的基本使用 补充:admin控制user字段
    Python pip换源 创建虚拟环境 luffy项目配置(数据库bug)
    gitignore 文件 刷新
    django python mange.py runserver 源码
    leetcode125. 验证回文串 python 简单
    leetcode1028 从先序遍历还原二叉树 python 100%内存 一次遍历
    fiddler
    xpath
    linux常用命令
  • 原文地址:https://www.cnblogs.com/chengulv/p/2372374.html
Copyright © 2020-2023  润新知