js实现Table隔行变色,支持鼠标经过,标题行处理

最新推荐文章于 2021-06-17 02:23:20 发布
最新推荐文章于 2021-06-17 02:23:20 发布
阅读量149 收藏
点赞数
分类专栏： Web前端技术 文章标签： IE JavaScript XHTML CSS HTML ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xmm218/article/details/83803431
版权

js实现Table隔行变色,支持鼠标经过,标题行处理,兼容IE和FF

<!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>无标题文档</title>
<style type="text/css">
.tdFirstColor {
	background-color: #C00;
}
.tdSecondColor {
	background-color: #33F;
}
.tdOverColor {
	background-color: #F90;
}
.thColor{
	background-color:#666;
}
</style>
<script language="javascript" type="text/javascript">
	if(document.all){
		//IE
		document.attachEvent("onreadystatechange",function(){
				if(document.readyState=="complete"){
					setTableStyle("tbFirst","tdFirstColor","tdSecondColor","tdOverColor",true,"thColor");
				}
			},false);
	}else{
		//FF
		document.addEventListener("DOMContentLoaded",function(){
				setTableStyle("tbFirst","tdFirstColor","tdSecondColor","tdOverColor",true,"thColor");
			},false);
	}
	
	
	function setTableStyle(tableId,firstClass,secondClass,overClass,isOver,headClass){
		var tb=document.getElementById(tableId);
		for(i=0;i<tb.rows.length;i++){
			tb.rows[i].className=headClass;
			if(i%2==0){
				if(tb.rows[i].cells[0].tagName=="TD")
					tb.rows[i].className=firstClass;
			}
			else{
				if(tb.rows[i].cells[0].tagName=="TD")
					tb.rows[i].className=secondClass;
			}
			if(isOver && tb.rows[i].cells[0].tagName=="TD"){
				var orgClassName;
				if(document.all){
					tb.rows[i].οnmοuseοver=(function(){
						return function(){
							orgClassName=this.className;
							this.className=overClass;
						}
					})();
					tb.rows[i].οnmοuseοut=(function(){
						return function(){
							this.className=orgClassName
						};
					})();
				}
				else{
					
					tb.rows[i].addEventListener("mouseover",function(){
						orgClassName=this.className
						this.className=overClass;
						},false);
					tb.rows[i].addEventListener("mouseout",function(){
						this.className=orgClassName;
						},false);
				}
			}
		}
	};
</script>

</head>

<body>
<table id="tbFirst" width="760" border="1" cellpadding="5" cellspacing="0">
  <tr>
    <th>&nbsp;</th>
    <th>&nbsp;</th>
    <th>&nbsp;</th>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th>&nbsp;</th>
    <th>&nbsp;</th>
    <th>&nbsp;</th>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

 

xmm218
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现表格隔行变色和鼠标移入高亮
Q_004的博客
08-20 3204
代码如下： window.onload=function() { var oTab=document.getElementById('tab1') var oldColor=''; function toColor() { for(var i=0;i<oTab.tBodies[0].
java中表格隔行变色_【JavaWeb】TableDemo 表格隔行显色+鼠标悬停高亮显示
weixin_30784365的博客
02-24 890
【普通表格-非隔行显色】approach1window.onload = function () {//#-----非隔行显色---需要css辅助-------------------------------------------function mouseover (){var rows = document.getElementsByTagName('tr');//取得行for(var i=...
js表头固定,固定table标题行
11-15
jquery表头固定，有两种情况，请参照，jquery请自行附加，就不上传了。
js 实现table标题固定
你好邱林和的专栏
10-20 2267
使用ScrollTableFixed插件可以很好的实现这一效果，他的github地址：https://github.com/doska80/ScrollTableFixed，demo地址如下：https://github.com/doska80/ScrollTableFixed/blob/master/ScrollTableFixed/index.html，
HTML固定Table标题行的四种方法
08-31
Javascript脚本实现HTML页面中表格Table的标题行固定位置，并与表格内容对齐。
判断鼠标点击所在表格的第几行以及删除表格的行
04-27
判断鼠标点击所在表格的第几行以及删除表格的行 判断鼠标点击所在表格的第几行以及删除表格的行 判断鼠标点击所在表格的第几行以及删除表格的行
js实现页面表格内容的复制粘贴填充，实现快速填写
东方郭的博客
11-02 1万+
JS如下： /*选择开始复制位置*/ $(document).ready(function(){ $("table").on("click","td[scode]",function(){ $("table td[scode]").attr("class",""); $(this).attr("class","inputred"); }); }); function cellke
利用html制作隔行变色表格,javascript实现table表格隔行变色的方法
weixin_32809369的博客
06-17 1081
本文实例讲述了javascript实现table表格隔行变色的方法。分享给大家供大家参考。具体实现方法如下：table间隔色function SetTableColor() {var tbl = document.getElementById("tblMain");var trs = tbl.getElementsByTagName("tr");for (var i = 0; i < trs...
简单实现表格隔行变色+鼠标经过变色
08-25 182
代码 <!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>&...
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
10-22
在这个例子中，我们将深入探讨如何使用jQuery创建一个插件，以实现表格隔行变色以及鼠标滑过时的高亮显示效果。 首先，我们来看一下基本的HTML结构，这里包含了一个简单的表格，用于展示插件的效果： ```html ...
js实现隔行变色操作鼠标经过效果
03-24
在本案例中，我们探讨的主题是如何使用JavaScript实现一种常见的网页美化技巧——隔行变色，即当用户鼠标悬停在表格行上时，该行会改变颜色，以突出显示。这种效果常见于数据展示或列表中，可以引导用户的注意力，...
Table隔行变色的JavaScript代码
10-28
用js实现的table隔行变色，鼠标放上去有变色显示，需要的朋友可以参考下。
纯JS代码实现隔行变色鼠标移入高亮
12-29
在前端开发中经常见到隔行变色鼠标移入高亮显示的效果，下面小编给大家分享基于js代码实现的隔行变色鼠标移入高亮效果，废话不多说了，具体代码如下所示： <!DOCTYPE html> <html> <head> <meta...
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
12-04
在网页设计中，表格（Table）是常见的数据展示方式，而为了提高用户体验，常常需要对表格进行美化，比如隔行变色以及高亮显示当前选中的行。本篇将详细介绍如何使用jQuery实现这一功能。 首先，jQuery是一个轻量级...
js实现表格隔行变色
weixin_45730243的博客
12-21 1146
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> * {
HTML表格多行表头,隔行变色,点击变色的实现
qq_28053177的博客
10-14 2663
先上效果图 首先多行表头和设置每一个单元格占据的行数跟列数 <thead> <tr> <th rowspan="2">设市区</th> <th colspan="3">年度总量</th> <th colspan="3">累计安排使用数</th> <th colspan="3">剩余数</th>
js获取html中的table元素里的每一行的行号
热门推荐
子田力亥
03-03 1万+
Js获取html文件中的table元素中的行号
《传感器及应用》课程试题(A卷).doc
最新发布
07-16
传感器
vxe-table隔行变色
03-07
其中，隔行变色是vxe-table的一个常见需求，可以通过设置表格的奇偶行样式来实现。 在vxe-table中，可以通过设置表格的stripe属性来开启隔行变色效果。当stripe属性设置为true时，奇数行和偶数行会有不同的背景色，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值