自己动手-十字高亮表格数据

最新推荐文章于 2025-08-11 19:20:59 发布

原创最新推荐文章于 2025-08-11 19:20:59 发布 · 301 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#J# #JavaScript #XHTML #CSS #HTML #ViewUI

Javacript 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一个简单的HTML表格，并通过JavaScript实现了鼠标悬停时表格单元格的交互效果，包括改变当前光标所在行和列的背景颜色。

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