<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
table {
border: 1px solid #090;
border-collapse:collapse;
}
td{
border: 1px solid #FFF;
padding: 20px;
background-color: #0C9;
}
th {
border: 1px solid #FFF;
padding: 20px;
background-color: #ccc;
}
</style>
</head>
<body>
<table border="1" id="dataTable">
<tr>
<th>项目</th>
<th>项目</th>
<th>项目</th>
<th>项目</th>
<th>项目</th>
<th>项目</th>
</tr>
<tr>
<td>茶叶</td>
<td>茶叶</td>
<td>茶叶</td>
<td>茶叶</td>
<td>茶叶</td>
<td>茶叶</td>
</tr>
<tr>
<td>茶叶</td>
<td>茶叶</td>
<td>茶叶</td>
<td>茶叶</td>
<td>茶叶</td>
<td>茶叶</td>
</tr>
<tr>
<td>茶叶</td>
<td>茶叶</td>
<td>茶叶</td>
<td>茶叶</td>
<td>茶叶</td>
<td>茶叶</td>
</tr>
<tr>
<td>茶叶</td>
<td>茶叶</td>
<td>茶叶</td>
<td>茶叶</td>
<td>茶叶</td>
<td>茶叶</td>
</tr>
</table>
<script type="text/javascript">
var tableId="dataTable";
//表格背景颜色
var tableBgColor="#0C9";
//十字高亮颜色
var tableHighlightColor="#Fe3";
//是否水平方向上不受限制
var isHorizontalFull=false;
var dataTable=document.getElementById(tableId);
dataTable.onmouseover=function(e){
//兼容事件对象
var evt=e||event;
//兼容事件源
var target=evt.target||srcElement;
//如果事件源是td
if(target.tagName.toLowerCase()=="td"){
//修改当前光标所在列的背景颜色
var allRows=this.rows;
for ( var i = 1; i < allRows.length; i=i+1) {
if(target.cellIndex==0)continue;
allRows[i].cells[target.cellIndex].style.background=tableHighlightColor;
}
//修改当前光标所在行的背景颜色
var lateralCells=target.parentNode.cells;
for ( var j = 0; j < lateralCells.length;j=j+1) {
if(!isHorizontalFull&&j==0){
continue;
}
lateralCells[j].style.background=tableHighlightColor;
}
}
}
dataTable.onmouseout=function(e){
//兼容事件对象
var evt=e||event;
//兼容事件源
var target=evt.target||srcElement;
//如果事件源是td
if(target.tagName.toLowerCase()=="td"){
//修改当前光标所在列的背景颜色
var allRows=this.rows;
for ( var i = 1; i < allRows.length; i=i+1) {
if(target.cellIndex==0)continue;
allRows[i].cells[target.cellIndex].style.background=tableBgColor;
}
//修改当前光标所在行的背景颜色
var lateralCells=target.parentNode.cells;
for ( var j = 0; j < lateralCells.length;j=j+1) {
if(!isHorizontalFull&&j==0){
continue;
}
lateralCells[j].style.background=tableBgColor;
}
}
}
</script>
</body>
</html>
分享到：
相关推荐
本文详细讲解了如何在大功率PCB设计中灵活运用十字型铺铜和全铺铜的混合使用技巧，这不仅有助于提升电路板的散热效果，还能增强信号传输的稳定性和抗干扰能力。 首先，我们需要了解什么是全铺铜和十字型铺铜。全铺...
标题“创业策划书---十字绣-饰品.zip”表明这是一份关于开设十字绣饰品店的创业计划，而描述中的“创业策划书---十字绣-饰品”进一步确认了这个主题。这份压缩包内包含的“创业策划书---十字绣-饰品.doc”文件，很...
Excel是Microsoft Office套件中的一款电子表格程序，常用于数据分析、报表制作和日常办公。在"长沙新华-文献--Excel之表格制作PPT课件.ppt"中，主要讲述了如何使用Excel 2010来创建和格式化表格，以及一些基础操作。...
单片机设计报告样板---十字路口交通灯设计
syb创业策划书---十字绣-饰品
因式分解--十字相乘法练习题含答案.pdf 因式分解是代数学中的一种重要方法，它可以将多项式表达式分解成更简单的因式形式，从而方便后续计算和分析。十字相乘法是一种常用的因式分解方法，通过将多项式表达式分解成...
压缩包中为 十字链表法创建图的 C 文件源文件，及对应的PPT 博客《【经典算法实现 30】图的创建 --- 十字链表法》 链接：https://blog.csdn.net/Ciellee/article/details/108199838
研究报告--十字路口的产业园.doc
在iOS开发中，创建一个类似微博个人主页的十字形滑动效果是一项常见的需求，它可以提供丰富的用户体验，让用户在垂直和水平方向上都能浏览内容。这个"ios-十字形滑动.zip"项目提供了一个简单的实现方案，避免了通常...
本项目名为"自定义View-十字架"，显然聚焦于创建一个特定的图形——十字架。十字架在各种应用场景中都有可能出现，比如游戏、宗教图标或者简单的装饰元素。 首先，我们来探讨自定义View的基本步骤。在Android中，...
数据可能以CSV或其他表格格式存储，每一行代表一个时间周期（如日、周、月），列可能包含日期、开盘价、收盘价、最高价、最低价以及成交量等信息。 在实际应用中，投资者和分析师可以使用这些数据进行以下操作： 1...
《十字笔设计装置详解》 在我们的日常生活中，十字笔作为一种常见的书写工具，其设计与制作工艺蕴含着丰富的科学知识和技术细节。这份“行业文档-设计装置-十字笔.zip”压缩包，包含了“十字笔.pdf”文件，为我们...
标题和描述中提到的是一个关于创业的计划书，专注于十字绣和饰品的业务。这份文档很可能是对一项潜在创业项目全面而详细的规划，涵盖了市场分析、产品定位、营销策略、运营管理和财务预算等多个方面。以下将针对这些...
电子政务-十字基电桩.zip
《分解因式-十字相乘法》课件.ppt
在本实验"实验21-十字路口.zip"中，我们主要关注的是51单片机在实际应用中的一个综合项目，即如何利用51单片机来设计和控制一个模拟十字路口的系统。51单片机是微控制器领域中非常经典且广泛使用的型号，以其简单...
十字交叉滚子回转支承轴承是机械设备中关键的组件之一，尤其在重载、高精度旋转应用中，如机器人关节、风力发电机组、精密测量设备和航天器等。这种特殊的轴承结构使得它能够承受来自各个方向的负荷，包括径向、轴向...
"基于S-PLC-十字路口交通灯的控制系统设计" 本文将详细介绍基于S-PLC的十字路口交通灯控制系统设计，包括系统设计的主要内容和要求、控制流程图、PLC控制梯形图编程、设计过程和论文的基本要求、时间进度安排顺序...
PLC实验3-十字路口交通灯实验-自己根据顺序功能图绘制的梯形图程序（基于STEP 7-MicroWIN SMART软件）