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

本文介绍了一种使用JavaScript实现表格行动态高亮显示的方法,并提供了实际的代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<!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>

<script type="text/javascript">
addTableRolloverEffect('myTable','tableRollOverEffect1','tableRowClickEffect1');
addTableRolloverEffect('myTable2','tableRollOverEffect2','tableRowClickEffect2');
</script>


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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值