当鼠标滑过表格时，表格的行会高亮显示，鼠标离开颜色复原，如果鼠标点击，点击行会保存为红色不变 -

zhangyi6678

浏览: 76271 次
性别:
来自: 南京

最近访客更多访客>>

xxjkcyt

evilcry2012

FQ_kevin

tianwailaikewbb

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

当鼠标滑过表格时，表格的行会高亮显示，鼠标离开颜色复原，如果鼠标点击，点击行会保存为红色不变

博客分类：

javascript

JavaScript XHTML CSS HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript动态高亮显示表格中的行 - 分享JavaScript-sharejs.com</title>
<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">
/************************************************************************************************************
(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>

</head>
<body>
<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>

<br><br>
<div align="center">
获取更多JavaScript代码，请登录JavaScript分享网 <a href="http://www.sharejs.com">http://www.sharejs.com</a>
</div>
</body>
</html>

table.rar (1.9 KB)
下载次数: 26

分享到：

js解析JSon | 表格排序

2009-07-21 23:28
浏览 1905
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

当鼠标滑过表格时，表格的行会高亮显示，鼠标离开颜色复原，如果鼠标点击，点击行会保存为红色不变

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

当鼠标滑过表格时，表格的行会高亮显示，鼠标离开颜色复原，如果鼠标点击，点击行会保存为红色不变

评论

发表评论

相关推荐

Div+CSS+JS树形菜单,可刷新

JavaScript实用技巧集锦

javascript解析json

如何避免IE缓存的问题

如何在子页面使父页面转到一个新的页面,并关闭子页面

js解析JSon

表格排序

最近访客更多访客>>