<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="JS代码,表格变色,表格高亮,表格特效,交叉表格,jQuery" />
<meta name="description" content="jquery实现的超帅动态表格变色效果，更多表格变色,表格高亮,表格特效,交叉表格,jQuery请访问脚本之家JS代码频道。" />
<title>jquery实现的超帅动态表格变色效果_脚本之家</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="wp-content/jquery/jquery-1.2.1.pack.js"></script>
<script type="text/javascript" src="wp-content/jquery/chili/chili.js"></script>
<script type="text/javascript" src="jquery.tablehover.js"></script>
<script type="text/javascript">
<!--
ChiliBook.recipeFolder = "wp-content/jquery/chili/";
ChiliBook.stylesheetFolder = "wp-content/jquery/chili/";
$(document).ready(function()
{
$('#tableone').tableHover();
$('#tabletwo').tableHover({colClass: 'hover'});
$('#tablethree').tableHover({colClass: 'hover', cellClass: 'hovercell', clickClass: 'click'});
$('#tablefour').tableHover({colClass: 'hover', allowBody: false, clickClass: 'click'});
$('#tablefive').tableHover({rowClass: 'hoverrow', colClass: 'hover', clickClass: 'click', headRows: true, footRows: true, headCols: true, footCols: true});
$('#tablesix').tableHover({colClass: 'hover'});
$('#tableseven').tableHover({colClass: 'hover', spanRows: false, spanCols: false});
$('#tableeight').tableHover({colClass: 'hover', ignoreCols: [4,5,6]});
});
-->
</script>
<style type="text/css">
table
{
width: 400px;
}
td.click, th.click
{
background-color: #bbb;
}
td.hover, tr.hover
{
background-color: #69f;
}
th.hover, tfoot td.hover
{
background-color: ivory;
}
td.hovercell, th.hovercell
{
background-color: #abc;
}
td.hoverrow, th.hoverrow
{
background-color: #6df;
}
</style>
</head>
<body>
<div class="title">jQuery tableHover plugin</div>
<div class="link"><a href="http://p.sohei.org/jquery-plugins/tablehover">plugin page</a></div><br />
<div class="exa">
<h1>Example one:</h1>
<ul><li>simple row highlighting using the default settings</li></ul>
<pre><code class="javascript">
$('#tableone').tableHover();
</code></pre>
<table id="tableone">
<thead>
<tr><th colspan="2">A</th><th colspan="2">B</th><th colspan="2">C</th><th colspan="2">D</th></tr>
<tr><th>A+</th><th>A-</th><th>B+</th><th>B-</th><th>C+</th><th>C-</th><th>D+</th><th>D-</th></tr>
</thead>
<tfoot>
<tr><td>11</td><td>4</td><td>9</td><td>8</td><td>2</td><td>2</td><td>1</td><td>4</td></tr>
</tfoot>
<tbody>
<tr><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td>-</td><td>-</td><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td></tr>
<tr><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td>-</td><td>-</td><td><a href="#">X</a></td></tr>
<tr><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td>-</td><td>-</td><td><a href="#">X</a></td></tr>
<tr><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td></tr>
<tr><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td>-</td><td>-</td><td><a href="#">X</a></td><td>-</td></tr>
<tr><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td>-</td><td>-</td><td>-</td></tr>
<tr><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td><a href="#">X</a></td><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
</tbody>
</table>
</div>
<div class="exa">
<h1>Example two:</h1>
<ul><li>simple row highlighting using the default settings</li>
<li>simple column highlighting using css class "hover"</li></ul>
<pre><code class="javascript">
$('#tabletwo').tableHover({colClass: 'hover'});
</code></pre>
<table id="tabletwo">
<thead>
<tr><th colspan="2">A</th><th colspan="2">B</th><th colspan="2">C</th><th colspan="2">D</th></tr>
<tr><th>A+</th><th>A-</th><th>B+</th><th>B-</th><th>C+</th><th>C-</th><th>D+</th><th>D-</th></tr>
</thead>
<tfoot>
<tr><td>11</td><td>4</td><td>9</td><td>8</td><td>2</td><td>2</td><td>1</td><td>4</td></tr>
</tfoot>
<tbody>
<tr><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td>-</td><td>-</td><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td></tr>
<tr><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td>-</td><td>-</td><td><a href="#">X</a></td></tr>
<tr><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td>-</td><td>-</td><td><a href="#">X</a></td></tr>
<tr><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td></tr>
<tr><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td>-</td><td>-</td><td><a href="#">X</a></td><td>-</td></tr>
<tr><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td>-</td><td>-</td><td>-</td></tr>
<tr><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td><a href="#">X</a></td><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
</tbody>
</table>
</div>
<div class="exa">
<h1>Example three:</h1>
<ul><li>simple row highlighting using the default settings</li>
<li>simple column highlighting using css class "hover"</li>
<li>higlight the current cell using css class "hovercell"</li>
<li>fix the current highlight on click using css class "click"</li></ul>
<pre><code class="javascript">
$('#tablethree').tableHover({colClass: 'hover', cellClass: 'hovercell', clickClass: 'click'});
</code></pre>
<table id="tablethree">
<thead>
<tr><th colspan="2">A</th><th colspan="2">B</th><th colspan="2">C</th><th colspan="2">D</th></tr>
<tr><th>A+</th><th>A-</th><th>B+</th><th>B-</th><th>C+</th><th>C-</th><th>D+</th><th>D-</th></tr>
</thead>
<tfoot>
<tr><td>11</td><td>4</td><td>9</td><td>8</td><td>2</td><td>2</td><td>1</td><td>4</td></tr>
</tfoot>
<tbody>
<tr><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td><a href="#">X</a><
jquery实现的超帅动态表格交叉变色高亮显示效果.zip
版权申诉
97 浏览量
2022-11-07
23:55:26
上传
评论
收藏 26KB ZIP 举报
jquery实现的超帅动态表格交叉变色高亮显示效果.zip （7个子文件） 
132696214783401236 
jquery.tablehover.pack.js 3KB jquery.tablehover.js 13KB
index.html 23KB wp-content jquery jquery-1.2.1.pack.js 27KB chili chili.js 6KB jquery.tablehover.min.js 3KB style.css 644B资源评论
