`

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

J#JavaScriptXHTMLCSSHTML
阅读更多 
<!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>

  

分享到：
| 自己动手-正则校验输入
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics