`

比较高效的表格行背景变色及选定高亮JS

ASP.netASPHTML.netBlog 
阅读更多
下面这个例一摘录自：
http://blog.breakn.net/article.asp?id=447
例一： 
//点击当前选中行的时候设置当前行的颜色，同时恢复除当前行外的行的颜色及鼠标事件  
function selectRow(target)  
{  
var sTable = document.getElementById("ServiceListTable")  
for(var i=1;i<sTable.rows.length;i++) //遍历除第一行外的所有行  
{  
if (sTable.rows[i] != target) //判断是否当前选定行  
{  
sTable.rows[i].bgColor = "#ffffff"; //设置背景色  
sTable.rows[i].onmouseover = resumeRowOver; //增加onmouseover 事件  
sTable.rows[i].onmouseout = resumeRowOut;//增加onmouseout 事件  
}  
else  
{  
sTable.rows[i].bgColor = "#d3d3d3";  
sTable.rows[i].onmouseover = ""; //去除鼠标事件  
sTable.rows[i].onmouseout = ""; //去除鼠标事件  
}  
}  
}  
//移过时tr的背景色  
function rowOver(target)  
{  
target.bgColor='#e4e4e4';  
}  
//移出时tr的背景色  
function rowOut(target)  
{  
target.bgColor='#ffffff';  
}  
//恢复tr的的onmouseover事件配套调用函数  
function resumeRowOver()  
{  
rowOver(this);  
}  
//恢复tr的的onmouseout事件配套调用函数  
function resumeRowOut()  
{  
rowOut(this);  
}


页面测试表格： 
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="ServiceListTable">  
<tr>  
<th>服务事项</th>  
<th>N</th>  
<th>状态</th>  
<th>办结</th>  
<th>资料</th>  
</tr>  
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">  
<td>相关内容</td>  
<td align="center">&nbsp;</td>  
<td align="center">&nbsp;</td>  
<td align="center">&nbsp;</td>  
<td align="center">&nbsp;</td>  
</tr>  
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">  
<td>相关内容</td>  
<td align="center">&nbsp;</td>  
<td align="center">&nbsp;</td>  
<td align="center">&nbsp;</td>  
<td align="center">&nbsp;</td>  
</tr>  
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">  
<td>相关内容</td>  
<td align="center">&nbsp;</td>  
<td align="center">&nbsp;</td>  
<td align="center">&nbsp;</td>  
<td align="center">&nbsp;</td>  
</tr>  
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">  
<td>相关内容</td>  
<td align="center">&nbsp;</td>  
<td align="center">&nbsp;</td>  
<td align="center">&nbsp;</td>  
<td align="center">&nbsp;</td>  
</tr>  
</table>



例二：
上述为Row中添加效果，做适当修改，为每个Cell添加效果： 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<script language="javascript">
	function selectCell(target) {  
		var sTable = document.getElementById("table1")  
		for(var i=0;i<sTable.rows.length;i++) {    
			for(var j=0; j<sTable.rows[i].cells.length; j++) {
				if (sTable.rows[i].cells[j] != target) {
					sTable.rows[i].cells[j].bgColor = "#ffffff";   
					sTable.rows[i].cells[j].onmouseover = resumeCellOver;   
					sTable.rows[i].cells[j].onmouseout = resumeCellOut;
				} 
				else {
					sTable.rows[i].cells[j].bgColor = "#d3d3d3";  
					sTable.rows[i].cells[j].onmouseover = ""; 
					sTable.rows[i].cells[j].onmouseout = ""; 
				}   
			}
		}  
	}
	
	function cellOver(target) {  
		target.bgColor='#e4e4e4';  
	}  
	
	function cellOut(target) {  
		target.bgColor='#ffffff';  
	}  
	
	function resumeCellOver() {  
		cellOver(this);  
	}  
	
	function resumeCellOut() {  
		cellOut(this);  
	}  
</script>
</head>
<body>
	<table align="center" width="200" height="200" border="1" cellspacing="0" cellpadding="0" id="table1">  
		<tr>  
			<td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">xxx</td>  
			<td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">xxx</td>  
			<td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">xxx</td>  
			<td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">xxx</td>  
		</tr>  
		<tr >  
			<td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">&nbsp;</td>  
			<td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">&nbsp;</td>  
			<td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">&nbsp;</td>  
			<td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">&nbsp;</td>  
		</tr>  
		<tr>    
			<td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">xxx</td>  
			<td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">xxx</td>  
			<td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">xxx</td>  
			<td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">xxx</td>  
		</tr>  
		<tr>  
			<td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">&nbsp;</td>  
			<td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">&nbsp;</td>  
			<td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">&nbsp;</td>  
			<td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">&nbsp;</td>  
		</tr>  
	</table>  
</body>
</html>



例三：
再做适当修改，实现鼠标点击Table单元格Cell的时候，最后两个被点击的Cell背景颜色被改变： 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<script language="javascript">
	var count = 0;
	
	function selectCell(target) { 
		var sTable = document.getElementById("table1");  
		if(count%2 == 0) {
			document.getElementById("preciousCell").value = target.id;
		} else {
			document.getElementById("currentCell").value = target.id;
		}
		var preciousCellId = document.getElementById("preciousCell").value;
		var currentCellId = document.getElementById("currentCell").value;
		//alert("preciousCellId:" + preciousCellId);
		//alert("currentCellId:" + currentCellId);
		for(var i=0;i<sTable.rows.length;i++) {    
			for(var j=0; j<sTable.rows[i].cells.length; j++) {
				if (sTable.rows[i].cells[j].id != preciousCellId && sTable.rows[i].cells[j].id != currentCellId ) {
					sTable.rows[i].cells[j].bgColor = "#ffffff";   
					sTable.rows[i].cells[j].onmouseover = resumeCellOver;   
					sTable.rows[i].cells[j].onmouseout = resumeCellOut;
				} else {
					sTable.rows[i].cells[j].bgColor = "#d3d3d3";  
					sTable.rows[i].cells[j].onmouseover = ""; 
					sTable.rows[i].cells[j].onmouseout = ""; 
				}  
			}
		}  
		count ++;
	}
	
	function cellOver(target) {  
		target.bgColor='#e4e4e4';  
	}  
	
	function cellOut(target) {  
		target.bgColor='#ffffff';  
	}  
	
	function resumeCellOver() {  
		cellOver(this);  
	}  
	
	function resumeCellOut() {  
		cellOut(this);  
	}  
</script>
</head>
<body>
	<form>
	<input type="hidden" id="preciousCell" />
	<input type="hidden" id="currentCell" />
	<table align="center" width="200" height="200" border="1" cellspacing="0" cellpadding="0" id="table1">  
		<tr>  
			<td id="td1" align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">xxx</td>  
			<td id="td2" align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">xxx</td>  
			<td id="td3" align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">xxx</td>  
			<td id="td4" align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">xxx</td>  
		</tr>  
		<tr >  
			<td id="td5" align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">&nbsp;</td>  
			<td id="td6" align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">&nbsp;</td>  
			<td id="td7" align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">&nbsp;</td>  
			<td id="td8" align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">&nbsp;</td>  
		</tr>  
		<tr>    
			<td id="td9" align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">xxx</td>  
			<td id="td10" align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">xxx</td>  
			<td id="td11" align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">xxx</td>  
			<td id="td12" align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">xxx</td>  
		</tr>  
		<tr>  
			<td id="td13" align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">&nbsp;</td>  
			<td id="td14" align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">&nbsp;</td>  
			<td id="td15" align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">&nbsp;</td>  
			<td id="td16" align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">&nbsp;</td>  
		</tr>  
	</table>  
	</form>
</body>
</html>



分享到：
| 通过js给页面元素添加事件
评论
发表评论

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

相关推荐

    高效的表格行背景隔行变色及选定高亮的JS代码

    这个例子中，我们讨论的是如何使用JavaScript来实现表格行的隔行变色以及选定行的高亮显示。这通常用于数据展示，使得用户能更清晰地区分不同的数据行，并且在选择某一行时有明显的视觉反馈。 首先，我们需要理解...

    JavaScript表格高亮选择特效.zip

    在本案例中，"JavaScript表格高亮选择特效"是一个利用JavaScript实现的功能，它允许用户在表格中点击某一列时，该列会被高亮显示，从而提供更好的视觉反馈和用户体验。这个特效通常用于数据密集型的界面，帮助用户更...

    鼠标经过改变table行列背景颜色

    在前端开发中，JavaScript是一种非常重要的开发语言，用于实现页面的动态交互效果。在这个特定的场景中，...同时，你还可以扩展此功能，实现更多复杂的交互效果，比如高亮选定的行或列，或者根据数据状态改变颜色等。

    报表表格管理系统左右菜单布局实现demo.zip

    在IT领域，构建一个高效的报表表格管理系统是至关重要的，它能够帮助用户以直观的方式查看、分析和管理大量的数据。"报表表格管理系统左右菜单布局实现demo.zip"是一个示例项目，展示了如何采用HTML和CSS来创建一个...

    ABC.rar_ABC

    这个效果使得用户在鼠标悬停时能够更清晰地看到选定的行，而当鼠标离开时，行的颜色恢复原状。 这个效果主要基于HTML、CSS（层叠样式表）和可能的JavaScript技术实现。在HTML中，我们可以创建一个表格结构，如`...

    JS.rar_javascript 日历

    在"JS.rar_javascript 日历"这个资源中，我们聚焦的是如何使用JavaScript实现一个功能完备的日历组件。 首先，JavaScript日历通常用于提供用户友好的日期选择功能，常见于事件安排、预订系统或任何形式需要输入日期...

    jQuery 隔行换色 支持键盘上下键，按Enter选定值

    标题中的“jQuery 隔行换色 支持键盘上下键，按Enter选定值”描述了一个功能丰富的交互式表格实现，通过jQuery库实现了隔行变色、键盘导航以及Enter键选择行的功能。以下是这个功能的详细解释： 1. **jQuery隔行换...

    JavaScript日期控件

    2. 编写CSS样式：为日历元素添加样式，包括背景、边框、字体、颜色等，使其符合设计需求。 3. 初始化JavaScript：在页面加载完成后，使用JavaScript生成当前月和年的日历视图。这涉及计算每月的第一天和最后一天，...

    三个仅用于显示用日历js

    为了创建日历，开发者会先通过JavaScript获取或创建HTML元素，如表格（table）、行（tr）、单元格（td）等，并按照日历格式组织它们。 2. **事件处理**：为了让日历具有交互性，开发者会为某些元素添加事件监听器，...

    js基于calendar实现的橙色日期选择器源码.zip

    CSS将被用来定义日期单元格的颜色、高亮选定的日期以及其他设计元素，如边框、背景等。在源码中，可能有一个单独的CSS文件或者内联样式，以实现橙色的界面风格。 4. **用户交互**：当用户点击某个日期时，...

    js日历控件js日历控件

    创建日历通常涉及到动态插入新的DOM节点，如表格、行和单元格，以及更新已有节点的内容，如设置选中日期的样式。 4. **CSS美化**：CSS（Cascading Style Sheets）用于定义日历的视觉样式，包括颜色、字体、布局等。...

    史上最强js日历控件

    JavaScript（简称JS）是一种轻量级的解释型编程语言，广泛应用于网页和网络应用开发，尤其是在客户端脚本处理方面。日历控件是用户界面设计中常见的一种元素，用于选择日期，常见于表单填写、事件安排等场景。本文将...

    类似iphone的 js日期选择控件

    可以创建一个表格来展示日期，并根据选定的日期高亮显示。 3. **日期计算**：编写函数来处理日期的加减，以便用户可以前后翻页。这涉及到JavaScript的Date对象和其方法，如`getFullYear()`, `getMonth()`, `getDate...

    js+css日历选择填写弹出框特效代码

    比如，弹出框的边框样式、背景颜色、透明度、阴影效果，以及日历单元格的高亮样式等都可以通过CSS进行定制。此外，CSS还能够帮助定位弹出框，使其在页面上居中显示，或者根据用户的设备和屏幕尺寸进行响应式布局，...

    JS日历控件

    JavaScript（简称JS）是一种广泛用于网页和网络应用的编程语言，尤其在前端开发中扮演着重要角色。"JS日历控件"是JavaScript实现的一种交互式日历组件，它允许用户方便地选择日期，常用于表单输入、事件管理或其他...

    非常简洁好用的日历控件

    至于" images "目录，很可能包含了日历控件所需的图像资源，比如日历图标、箭头、高亮背景等，这些图片可以增强日历的视觉效果，使其更易于理解和操作。 总的来说，这个日历控件的实现涉及到了前端开发的多个方面：...

    html网页月历

    3. 创建表格结构，包括表头（星期几的名称）和日期行。 4. 填充单元格，考虑闰年和非闰年的2月天数。 5. 添加事件监听器，当用户点击某个日期时触发相应的行为。 在实际应用中，为了增强用户体验，我们还可能添加...

    js日期选择代码

    2. **样式化**：使用CSS为日历添加样式，使其看起来美观且易于使用，例如，可以高亮显示今天日期，或者通过颜色区分周末。 3. **JavaScript事件处理**：为每个日期单元格添加`click`事件监听器，当用户点击时更新...

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