jquery实现的类似高亮显示已选择的表格行_表格相关

jquery实现的类似高亮显示已选择的表格行: 发布时间：2020-12-19编辑：脚本学堂

选中某顶添加背景色，点击复选框，所在行变色，类似高亮显示已选择的表格行，JavaScript与CSS共同结合的结果，这里引入jQuery1.3插件，兼容性更好。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>高亮显示选中行</title>
	<style type="text/css">
	table{ border:0;border-collapse:collapse;}
	td{ font:normal 12px/17px Arial;padding:2px;width:100px;}
	th{ font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px	solid #333;}
	.even{ background:#FFF38F;}  /* 偶数行样式*/
	.odd{ background:#FFFFEE;}  /* 奇数行样式*/
	.selected{ background:#FF6500;color:#fff;}
	</style>
	<script src="/source/js/<a href=http://www.jb200.com/jb/jquery/ target=_blank class=infotextkey>jquery</a>1.3.2.js" type="text/<a href=http://www.jb200.com/js/ target=_blank class=infotextkey>javascript</a>"></script>
	<script type="text/javascript">
	//插件编写
	;(function($) {
		$.fn.extend({
			"alterBgColor":function(options){
				//设置默认值
				options=$.extend({
					odd:"odd",	/* 偶数行样式*/
					even:"even", /* 奇数行样式*/
					selected:"selected" /* 选中行样式*/ 
				},options);
				$("tbody>tr:odd",this).addClass(options.odd);
				$("tbody>tr:even",this).addClass(options.even);
				$('tbody>tr',this).click(function() {
					//判断当前是否选中
					var hasSelected=$(this).hasClass(options.selected);
					//如果选中，则移出selected类，否则就加上selected类
					$(this)[hasSelected?"removeClass":"addClass"](options.selected)
						//查找内部的<a href=http://www.jb200.com/zt/checkbox/ target=_blank class=infotextkey>checkbox</a>,设置对应的属性。
						.find(':checkbox').attr('<a href=http://www.jb200.com/zt/checked/ target=_blank class=infotextkey>checked</a>',!hasSelected);
				});
				// 如果单选框默认情况下是选择的，则高色.
				$('tbody>tr:has(:checked)',this).addClass(options.selected);
				return this;  //返回this，使方法可链。
			}
		});
	})(jQuery);

//插件应用
	$(function(){
		$("#table2")
				.alterBgColor()  //应用插件
				.find("th").css("color","red");//可以链式操作
	})

</script>
</head>
<body>
<table id="table1">
	<thead><tr><th> </th><th>姓名</th><th>性别</th><th>暂住地</th></tr></thead>
	<tbody>
		<tr>
			<td><input type="checkbox" name="choice" value=""/></td>
			<td>张山</td>
			<td>男</td>
			<td>浙江宁波</td>
		</tr>
		<tr>
			<td><input type="checkbox" name="choice" value="" /></td>
				<td>李四</td>
			<td>女</td>
			<td>浙江杭州</td>
		</tr>
		<tr>
			<td><input type="checkbox" name="choice" value="" checked="checked" /></td>
					<td>王五</td>
			<td>男</td>
			<td>湖南长沙</td>
		</tr>
		<tr>
			<td><input type="checkbox" name="choice" value="" /></td>
			<td>找六</td>
			<td>男</td>
			<td>浙江温州</td>	
		</tr>
		<tr>
		<td><input type="checkbox" name="choice" value="" /></td>
				<td>Rain</td>
			<td>男</td>
			<td>浙江杭州</td>
		</tr>
		<tr>
			<td><input type="checkbox" name="choice" value="" checked="checked" /></td>
			<td>MAXMAN</td>
			<td>女</td>
			<td>浙江杭州</td>
		</tr>
	</tbody>
</table>
<br /><br />
<table id="table2">
	<thead><tr><th> </th><th>姓名</th><th>性别</th><th>暂住地</th></tr></thead>
	<tbody>
		<tr>
			<td><input type="checkbox" name="choice" value=""/></td>
			<td>张山</td>
			<td>男</td>
			<td>浙江宁波</td>
		</tr>
		<tr>
			<td><input type="checkbox" name="choice" value="" /></td>
				<td>李四</td>
			<td>女</td>
			<td>浙江杭州</td>
		</tr>
		<tr>
			<td><input type="checkbox" name="choice" value="" checked="checked" /></td>
					<td>王五</td>
			<td>男</td>
			<td>湖南长沙</td>
		</tr>
		<tr>
			<td><input type="checkbox" name="choice" value="" /></td>
			<td>找六</td>
			<td>男</td>
			<td>浙江温州</td>	
		</tr>
		<tr>
		<td><input type="checkbox" name="choice" value="" /></td>
				<td>Rain</td>
			<td>男</td>
			<td>浙江杭州</td>
		</tr>
		<tr>
			<td><input type="checkbox" name="choice" value="" checked="checked" /></td>
			<td>MAXMAN</td>
			<td>女</td>
			<td>浙江杭州</td>
		</tr>
	</tbody>
</table>
</body>
</html>

提示：可修改代码后再运行!

上一篇：简简实用的表格隔行换色，可固定背景颜色
下一篇：返回列表

与 jquery实现的类似高亮显示已选择的表格行有关的文章

本文标题：jquery实现的类似高亮显示已选择的表格行
本页链接：http://www.jb200.com/tx/170.html

浏览排行

栏目分类

热点文章

jquery实现的类似高亮显示已选择的表格行