下载本资源原文网址：http://www.daima.org/js/js17210.html 当鼠标滑过表格时，表格的行会高亮显示，鼠标离开颜色复原，如果鼠标点击，点击行会保存为红色不变，效果非常实用
在表格<head>区添加以下内容
[code]
<style type="text/css">
body{
font-size:0.8em;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
margin:0px;
padding:0px;
}
img{
border:0px;
}
thead td{
font-weight:bold;
color:#000;
background-color:#E2EBED;
}
td{
padding:2px;
}
table{
border:1px solid #000;
border-collapse: collapse;
}
h1{
font-size:1.3em;
margin-bottom:0px;
}
table,h1,p,#ads{
margin-left:10px;
}
#ads{
margin-top:20px;
}
/* These classes are used by the script as rollover effect for table 1 and 2 */
.tableRollOverEffect1{
background-color:#317082;
color:#FFF;
}
.tableRollOverEffect2{
background-color:#000;
color:#FFF;
}
.tableRowClickEffect1{
background-color:#F00;
color:#FFF;
}
.tableRowClickEffect2{
background-color:#00F;
color:#FFF;
}
</style>
<script type="text/javascript">
/*****************************************************
* Share JavaScript (//www.jb51.net)
* 使用此脚本程序，请保留此声明
* 获取此脚本以及更多的JavaScript程序，请访问 //www.jb51.net
******************************************************/
/************************************************************************************************************
(C) www.dhtmlgoodies.com, November 2005
This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.
Thank you!
www.dhtmlgoodies.com
Alf Magne Kalleland
************************************************************************************************************/
var arrayOfRolloverClasses = new Array();
var arrayOfClickClasses = new Array();
var activeRow = false;
var activeRowClickArray = new Array();
function highlightTableRow()
{
var tableObj = this.parentNode;
if(tableObj.tagName!='TABLE')tableObj = tableObj.parentNode;
if(this!=activeRow){
this.setAttribute('origCl',this.className);
this.origCl = this.className;
}
this.className = arrayOfRolloverClasses[tableObj.id];
activeRow = this;
}
function clickOnTableRow()
{
var tableObj = this.parentNode;
if(tableObj.tagName!='TABLE')tableObj = tableObj.parentNode;
if(activeRowClickArray[tableObj.id] && this!=activeRowClickArray[tableObj.id]){
activeRowClickArray[tableObj.id].className='';
}
this.className = arrayOfClickClasses[tableObj.id];
activeRowClickArray[tableObj.id] = this;
}
function resetRowStyle()
{
var tableObj = this.parentNode;
if(tableObj.tagName!='TABLE')tableObj = tableObj.parentNode;
if(activeRowClickArray[tableObj.id] && this==activeRowClickArray[tableObj.id]){
this.className = arrayOfClickClasses[tableObj.id];
return;
}
var origCl = this.getAttribute('origCl');
if(!origCl)origCl = this.origCl;
this.className=origCl;
}
function addTableRolloverEffect(tableId,whichClass,whichClassOnClick)
{
arrayOfRolloverClasses[tableId] = whichClass;
arrayOfClickClasses[tableId] = whichClassOnClick;
var tableObj = document.getElementById(tableId);
var tBody = tableObj.getElementsByTagName('TBODY');
if(tBody){
var rows = tBody[0].getElementsByTagName('TR');
}else{
var rows = tableObj.getElementsByTagName('TR');
}
for(var no=0;no<rows.length;no++){
rows[no].onmouseover = highlightTableRow;
rows[no].onmouseout = resetRowStyle;
if(whichClassOnClick){
rows[no].onclick = clickOnTableRow;
}
}
}
</script>
[/code]
在网页<body>区添加以下代码
[code]
<h1>Table example 1</h1>
<table id="myTable">
<thead>
<tr>
<td>Name</td>
<td>Age</td>
<td>Position</td>
<td>Income</td>
<td>Gender</td>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>37</td>
<td>Managing director</td>
<td>90.000</td>
<td>Male</td>
</tr>
<tr>
<td>Susan</td>
<td>34</td>
<td>Partner</td>
<td>90.000</td>
<td>Female</td>
</tr>
<tr>
<td>David</td>
<td>29</td>
<td>Head of production</td>
<td>70.000</td>
<td>Male</td>
</tr>
<tr>
<td>Laura</td>
<td>29</td>
<td>Head of marketing</td>
<td>70.000</td>
<td>Female</td>
</tr>
<tr>
<td>Kate</td>
<td>18</td>
<td>Marketing</td>
<td>50.000</td>
<td>Female</td>
</tr>
<tr>
<td>Mona</td>
<td>21</td>
<td>Marketing</td>
<td>53.000</td>
<td>Female</td>
</tr>
<tr>
<td>Mike</td>
<td>21</td>
<td>Marketing</td>
<td>53.000</td>
<td>Male</td>
</tr>
<tr>
<td>Mark</td>
<td>25</td>
<td>Production</td>
<td>52.000</td>
<td>Male</td>
</tr>
</tbody>
</table>
<h1>Table example 2</h1>
<table id="myTable2">
<thead>
<tr>
<td>Name</td>
<td>Age</td>
<td>Position</td>
<td>Income</td>
<td>Gender</td>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>33</td>
<td>Production</td>
<td>55.000</td>
<td>Male</td>
</tr>
<tr>
<td>Jennifer</td>
<td>24</td>
<td>Production</td>
<td>49.000</td>
<td>Female</td>
</tr>
<tr>
<td>David</td>
<td>25</td>
<td>Photography</td>
<td>51.000</td>
<td>Male</td>
</tr>
<tr>
<td>Anna</td>
<td>42</td>
<td>Head of photography</td>
<td>56.000</td>
<td>Female</td>
</tr>
<tr>
<td>Rita</td>
<td>30</td>
<td>Photography</td>
<td>54.000</td>
<td>Female</td>
</tr>
<tr>
<td>Magnus</td>
<td>25</td>
<td>Freelancer</td>
<td>65.000</td>
<td>Male</td>
</tr>
<tr>
<td>Johnny</td>
<td>29</td>
<td>Freelancer</td>
<td>63.000</td>
<td>Male</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
addTableRolloverEffect('myTable','tableRollOverEffect1','tableRowClickEffect1');
addTableRolloverEffect('myTable2','tableRollOverEffect2','tableRowClickEffect2');
</script>
[/code]
脚本配置说明
第一步：定义鼠标滑过效果的样式
定义鼠标滑过时的效果. 在范例里, 定义了两个css class，用于两个表格，样式代码如下:
[code]
.tableRollOverEffect1{
background-color:#317082;
color:#FFF;
}
.tableRollOverEffect2{
background-color:#000;
color:#FFF;
}
[/code]
第二步: 定义点击效果样式
定义鼠标点击时的效果. 范例中定义了两个:
[code]
.tableRowClickEffect1{
background-color:#F00;
color:#FFF;
}
.tableRowClickEffect2{
background-color:#00F;
color:#FFF;
}
[/code]
第三步：创建表格
表格代码如下：
[code]
<table id="myTable">
<thead>
<tr>
<td>Name</td>
<td>Age</td>
<td>Position</td>
<td>Income</td>
<td>Gender</td>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>37</td>
<td>Managing director</td>
<td>90.000</td>
<td>Male</td>
</tr>
<tr>
<td>Susan</td>
<td>34</td>
<td>Partner</td>
<td>90.000</td>
<td>Female</td>
</tr>
<tr>
<td>David</td>
<td>29</td>
<td>Head of production</td>
<td>70.000</td>
<td>Male</td>
</tr>
</tbody>
</table>
[/code]
注意给表格一个ID(example: "myTable"). 使用<THEAD> 和 <TBODY> 标签分割表格的头和内容. 当表格内包含<TBODY>变迁后,脚本只会高亮显示<TBODY>标签内的行, 如果没有<TBODY>所有的行都会高亮显示.
第四步：调用JavaScript函数
最后调用JavaScript函数来显示效果 Example:
[code]
<script type="text/javascript">
addTableRolloverEffect('myTable','tableRollOverEffect1','tableRowClickEffect1');
addTableRolloverEffect('myTable2','tableRollOverEffect2','tableRowClickEffect2');
</script>
[/code]
第一个参数是表格的ID,第二个参数是鼠标滑过是的样式，第三个参数是鼠标点击时的样式
其中第三个参数是可选的，如果你不希望鼠标点击时有任何变化，可以输入false。
(example: addTableRolloverEffect('myTable','tableRollOverEffect1','tableRowClickEffect1');).
脚本之家提醒您：函数调用了两次，是因为我们的domo中有两个表格，不要误会了，哈哈 |
