jQuery 插件表格高亮显示选中行全选、反选（四种模式）

最新推荐文章于 2022-11-06 08:07:12 发布
言会咸
最新推荐文章于 2022-11-06 08:07:12 发布
阅读量1.1w
点赞数
分类专栏： Javascript Jquery 文章标签： jquery function javascript table class xhtml
Javascript 同时被 2 个专栏收录
11 篇文章 0 订阅
订阅专栏
Jquery
4 篇文章 0 订阅
订阅专栏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<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>
</head>

<body>
<!-- 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>
</body>
</html>