jquery表格交叉高亮显示js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery表格交叉高亮显示js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery表格交叉高亮显示</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript" src="jquery.bstablecrosshair.js"></script>
</head>
<body>
<center>
<div>
<h2 id="x">jquery表格交叉高亮显示</h2>
</div>

<table style="border:2px solid #444;border-collapse:collapse;" id="mytable">
<tr>
<td>
Product
</td>
<td>
Price
</td>
<td>
ID Code
</td>
<td>
Quality
</td>
<td>
Exp Date
</td>
</tr>
<tr>
<td>Pro 1</td>
<td>51 $</td>
<td>4587</td>
<td>Good</td>
<td>02/01/2009</td>
</tr>
<tr>
<td>Pro 2</td>
<td>151 $</td>
<td>4847</td>
<td>Great</td>
<td>10/05/2009</td>
</tr>
<tr>
<td>Pro 3</td>
<td>34 $</td>
<td>5682</td>
<td>Good</td>
<td>01/08/2010</td>
</tr>
<tr>
<td>Pro 4</td>
<td>28 $</td>
<td>5147</td>
<td>Bad</td>
<td>02/09/2009</td>
</tr>
<tr>
<td>Pro 5</td>
<td>151 $</td>
<td>7874</td>
<td>Good</td>
<td>10/10/2009</td>
</tr>
<tr>
<td>Pro 6</td>
<td>11 $</td>
<td>4017</td>
<td>Good</td>
<td>05/07/2009</td>
</tr>
</table>
<br />
<hr />
<script type="text/javascript">
$.bstablecrosshair('mytable',{color:'#444',background:'#aaa','foreground':'#fff'});
</script>
</center>
</body>
</html>

CSS代码(styles.css):

body{font:normal 11px auto "Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;color:#4f6b72;background:#E6EAE9;}
a{color:#c75f3e;}
#mytable{width:700px;padding:0;margin:0;background:#fff;}
td{border-right:1px solid #C1DAD7;border-bottom:1px solid #C1DAD7;padding:6px 6px 6px 12px;color:#4f6b72;}

附件:下载该文件资源,减少时间成本(增值服务)