jQuery表格高亮显示选中行的四种模式

发布时间:2019-09-28编辑:脚本学堂
分享一例jquery代码,当点击复选框时,会高亮显示选中的行,并可以全选与反选,不错的一例jquery代码,有需要的朋友参考下吧。

本节主要内容:
jquery实现复选框选中时,高亮显示选中的行。

例子:
 

复制代码 代码示例:

<!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>jquery表格修饰:隔行换色,点击变色,多选单选变色-www.jb200.com</title> 
<script language=javascript src="/js/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实现点击复选框即高亮显示选中行 全选、反选
    */ 
    (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>