拖动隔行变色的鼠标经过变色

最新推荐文章于 2019-08-22 08:43:35 发布

sotong006

最新推荐文章于 2019-08-22 08:43:35 发布

阅读量274

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/sotong006/article/details/54691718

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head> 
<title>拖动隔行变色的鼠标经过变色</title> 
<style type="text/css" media="screen"> 
table {border-collapse:collapse;border:solid #999;border-width:1px 0 0 1px;} 
table td {border:solid #999;border-width:0 1px 1px 0;} 
.t1 {background-color:#fff;} 
.t2 {background-color:#eee;} 
.t3 {background-color:#ccc;} 
#sample2 tr:nth-of-type(odd){ background:#00ccff;}
#sample2 tr:nth-of-type(even){ background:#ffcc00;} 
*{ margin:0; padding:0;}
body{font-size:14px; padding:50px;}
.lanrenzhijia{text-align:left;}
.lanrenzhijia th{  background-image:url('images/th.png');  height:30px;  background-repeat:no-repeat;  color:white;  text-shadow: #012b4d 2px 2px 2px;  text-align: center; }
.lanrenzhijia td{text-indent:5px; padding:5px;color:#444;border-bottom:1px solid #bbb;border-left:1px solid #bbb;}
.lanrenzhijia td.left{border-left:1px solid #2e638e;}
.lanrenzhijia td.right{border-right:1px solid #2e638e;}
.lanrenzhijia td.bottom{border-bottom:1px solid #2e638e;}
.grip{width:20px;height:30px;margin-top:-3px;background-image:url('images/grip.png');margin-left:-5px;position:relative;z-index:88;cursor:e-resize;}
.grip:hover{background-position-x:-20px;}
.dragging .grip{background-position-x:-40px;}
.sampleText{position:relative;width:100%;}
.dotted{background-image:url('images/dotted.png');background-repeat:repeat-y;}
input.check{}
#sample2Txt{float:right;}
label{color:#0361ae;}
#sample2 th:nth-child(2){color:Red !important;display:none;}
#sample2 td:nth-child(2){color:Red !important;display:none;}
#sample2 th:nth-child(3){color:Red !important;display:none;}
#sample2 td:nth-child(3){color:Red !important;display:none;}
</style> 
<script type="text/javascript" src="C:\Users\mcptt\Desktop\jb51\jquery-1.7.2.js"></script>
<script type="text/javascript" src="C:\Users\mcptt\Desktop\jb51\jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="C:\Users\mcptt\Desktop\jb51\colResizable-1.5.min.js"></script>
<script type="text/javascript"> 
	$(function(){
		$("#sample2 tr").mousemove(function() {
			//$(this).css("backgroundColor", "#E6E6FA");
			$(this).css("fontWeight", "bolder");
		});
		$("#sample2 tr").mouseout(function() {
			//$(this).css("backgroundColor", "#FFFFFF");
		    $(this).css("fontWeight", "normal");
		});	


		var onSampleResized = function(e){
			var columns = $(e.currentTarget).find("th");
			var msg = "columns widths: ";
			columns.each(function(){ msg += $(this).width() + "px; "; })
			$("#sample2Txt").html(msg);		
		};	
		$("#sample2").colResizable({
			liveDrag:true, 
			gripInnerHtml:"<div class='grip'></div>", 
			draggingClass:"dragging", 
			onResize:onSampleResized
		});
	});
	
</script> 
</head> 
<body> 
<body>
<!-- 代码部分begin -->
<div class="lanrenzhijia" >
<table id="sample2" width="100%" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<th>标题</th><th>标题</th><th>标题</th><th>标题</th><th>标题</th>
	</tr>
	<tr>
		<td class="left">表格内容</td><td>表格内容</td><td>表格内容</td><td>表格内容</td><td class="right">表格内容</td>
	</tr>
	<tr>
		<td class="left">表格内容</td><td>表格内容</td><td>表格内容</td><td>表格内容</td><td class="right">表格内容</td>
	</tr>
	<tr>
		<td class="left">表格内容</td><td>表格内容</td><td>表格内容</td><td>表格内容</td><td class="right">表格内容</td>
	</tr>
	<tr>
		<td class="left">表格内容</td><td>表格内容</td><td>表格内容</td><td>表格内容</td><td class="right">表格内容</td>
	</tr>
	<tr>
		<td class="left">表格内容</td><td>表格内容</td><td>表格内容</td><td>表格内容</td><td class="right">表格内容</td>
	</tr>
	<tr>
		<td class="left bottom">表格内容</td><td class="bottom">表格内容</td><td class="bottom">表格内容</td><td class="bottom">表格内容</td><td class="bottom right">表格内容</td>
	</tr>																	
</table>
</div>	
</body>
</html>

sotong006

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
拖动隔行变色的鼠标经过变色

拖动隔行变色的鼠标经过变色 table {border-collapse:collapse;border:solid #999;border-width:1px 0 0 1px;} table td {border:solid #999;border-width:0 1px 1px 0;} .t1 {background-color:#fff;} .t2 {background-col
复制链接

扫一扫