JQuery UIjQuery表格高亮显示选中行的四种模式
本节主要内容：
jquery实现复选框选中时，高亮显示选中的行。
例子：
复制代码 代码示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery表格修饰：隔行换色,点击变色,多选单选变色-</title>
<script language=javascript src=http://www.jquerycn.cn/a_10499/"/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>
相关热词：
本站内容来源于网络，如有侵权请与我们联系，我们会及时删除，我们深感抱歉！
注：本站所有信息仅供用于网络技术学习参考,学习中请遵循相关法律法规！
本文地址: https://v30.fanwenzhu.com/jq/jc/9878.shtml
相关文章
热门TAG
win10 ecshop 主机 阿里云 解决 配置 C# C++ 解析 SQL语句 命令 Go语言 方法 CSS3 HTML5 CSS win7 MSSQL 服务器配置 IIS7.5 IIS7 IIS6 IIS CentOS 7 Linux oracle数据库 oracle phpcms discuz discuz教程最新文章
-
PHP识别相片是否是颠倒的
时间：2020-12-28
-
python编程有哪些ide
时间：2020-12-28
-
python开发工程师是做什么
时间：2020-12-28
-
php构造函数的作用
时间：2020-12-28
-
php怎么跟数据库连接
时间：2020-12-28
-
php实现顺序线性表
时间：2020-12-28
-
Python多重继承中的菱形继
时间：2020-12-28
-
php中break的作用
时间：2020-12-28
热门文章
-
php中常用的正则表达式使用方法
时间：2020-12-25
-
asp与php区别是什么？
时间：2020-12-27
-
PHP识别相片是否是颠倒的，并且重新摆正
时间：2020-12-28
-
Yii授权之基于角色的存取控制 （RBAC）
时间：2020-12-23
-
php的一键安装包有哪些 php环境搭建
时间：2020-12-19
-
php实现对图片对称加解密（适用身份证加
时间：2020-12-25
-
php如何理解面向对象
时间：2020-12-28
-
超详细分析php docker的原理及作用
时间：2020-12-27
-
Python控制Excel实现自动化办公
时间：2020-12-23
-
session的作用是什么
时间：2020-12-25