表格隔行换色+鼠标点击变色 JS版，IE7，FF，OPERQ测试通过

HTML表格交互样式实现
最新推荐文章于 2021-08-04 21:51:32 发布
最新推荐文章于 2021-08-04 21:51:32 发布 · 73 阅读 · 0
文章标签：

#javascript #ViewUI

本文介绍了一种通过JavaScript实现HTML表格交互样式的具体方法。利用简单的JavaScript代码，可以轻松为表格添加行背景颜色切换、鼠标悬停效果及点击高亮等功能，提升用户体验。
<script type="text/javascript"><!-- google_ad_client = "pub-4490194096475053"; /* 内容页,300x250,第一屏 */ google_ad_slot = "3685991503"; google_ad_width = 300; google_ad_height = 250; // --></script><script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"></script>

meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta content="all" name="robots" />
<meta name="author" content="盛飞, SenFe" />
<meta name="Copyright" content="" />
<meta name="description" content="" />
<meta content="" name="keywords" />
<style type="text/css"><!--
#senfe {
width: 300px;
border-top: #000 1px solid;
border-left: #000 1px solid;
}
#senfe td {
border-right: #000 1px solid;
border-bottom: #000 1px solid;
}
--></style>
<script language="javascript"><!--
function senfe(o,a,b,c,d){
var t=document.getElementById(o).getElementsByTagName("tr");
for(var i=0;i<t.length;i++){
t[i].style.backgroundColor=(t[i].sectionRowIndex%2==0)?a:b;
t[i].onclick=function(){
if(this.x!="1"){
this.x="1";//本来打算直接用背景色判断，FF获取到的背景是RGB值，不好判断
this.style.backgroundColor=d;
}else{
this.x="0";
this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
}
}
t[i].onmouseover=function(){
if(this.x!="1")this.style.backgroundColor=c;
}
t[i].onmouseout=function(){
if(this.x!="1")this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
}
}
}
--></script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" id="senfe">
<tr><td>　</td><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td><td>　</td></tr>
</table>
<script language="javascript"><!--
//senfe("表格名称","奇数行背景","偶数行背景","鼠标经过背景","点击后背景");
senfe("senfe","#fff","#ccc","#cfc","#f00");
--></script>
</body>
</html>

iteye_3224
关注
2020最新PHP面试题（附带答案）
weixin_43814458的博客
03-02 2万+
1.什么事面向对象？主要特征是什么？ 面向对象是程序的一种设计方式，它利于提高程序的重用性，使程序结构更加清晰。主要特征：封装、继承、多态。 我的官方群点击此处。 2.SESSION 与 COOKIE的区别是什么，请从协议，产生的原因与作用说明? 1、http无状态协议，不能区分用户是否是从同一个网站上来的，同一个用户请求不同的页面不能看做是同一个用户。 2、SESSION存储...
页面表格怎么实现隔行异色、隔行变色
rqgxy的博客
06-09 410
举例：采用 css+js 的方法，实现表格的隔行异色，需要如下几步： 定义 css 表格样式，如边框、宽度、颜色 在 js 中，创建 func()函数，并通过 onload 设置页面加载完成时，调用 func() 函数 通过 getElementById、getElementsByTagName 方法获得表格所有的行对象，通过 for 循环遍历表格每一行，根据奇偶行调用不同的样式类。 如果需要处理的表格较多，每次这样写会很麻烦。 一般报表工具都能支持这种功能，只需要使用内
9.1表格隔行换色
P_ning的博客
07-13 208
<!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...
JS+CSS实现隔行换色
soledede
09-20 222
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &amp
隔行换色+鼠标经过变色(ie6,ie7,ff)
管子（zero）的杂乱空间
12-11 1388
<!--google_ad_client = "pub-4490194096475053";/* 内容页,300x250,第一屏 */google_ad_slot = "3685991503";google_ad_width = 300;google_ad_height = 250;//--><script type="text/javascript"src="
超简单表格隔行换色+鼠标经过变色(ie6,ie7,ff)
02-09
下面我们将详细探讨如何实现“超简单表格隔行换色+鼠标经过变色”这一功能，并兼容IE6、IE7以及Firefox。 首先，让我们从隔行换色开始。这是一种常见的CSS技巧，可以通过使用CSS伪类`:nth-child()`来实现。这个选择...
实现跨浏览器表格隔行换色及鼠标悬停变色技巧
该文件标题、描述和标签都相同，指向同一个内容点：“超简单表格隔行换色+鼠标经过变色”，并且特别提及了兼容性问题，即需要在IE6、IE7和Firefox（通常指的是FF，即FireFox的缩写）中均能正常工作。 ### 知识点 #...
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
01-19
js代码： css代码： 代码如下: tr.alt td { background:#ecf6fc; /*这行将给所有的tr加上背景色*/ } tr.over td { background:#bcd4ec; /*这个将是鼠标高亮行的背景色*/ }
javascript表格隔行变色加鼠标移入移出及点击效果的方法
10-24
本文将详细解析如何利用JavaScript实现表格隔行变色、鼠标移入移出以及点击效果，帮助开发者为用户提供更加直观、友好的界面。 首先，表格隔行变色是一种常见的视觉技巧，它通过改变奇偶行的颜色差异来防止用户在...
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
10-22
在这个例子中，我们将深入探讨如何使用jQuery创建一个插件，以实现表格隔行变色以及鼠标滑过时的高亮显示效果。 首先，我们来看一下基本的HTML结构，这里包含了一个简单的表格，用于展示插件的效果： ```html ...
jQuery学习心得----鼠标经过时改变table行的背景色
ClareQi的博客
08-30 3775
学习了jQuery选择器，下面给大家一个关于选择器的例子，注释很详细，大家可以自己体会。                 Title     .tr1{background-color: #FF9933;}     $(function(){         //$("#tb tr")--选择id为tb的table，再选择该table的行tr
jsp或html中给选中的a标签改变颜色和背景色（用源生js）
qq_41447042的博客
08-04 2428
我们直接看代码 我是循环遍历的a标签 给每个a标签一个class属性 然后在js中进行设置 这里的if比较是比较目前页面的a标签的值和我们点击传递的serlvet是否是同一个。如果是就改变颜色 我打印一下 在终端给看一下 好的！如果还有什么的话。可以评论或者私我。 我也是一个小白 刚刚开始接触。希望大家可以互相交流学习 ...
怎么用js设置a标签点击链接改变当前颜色
weixin_30657541的博客
12-16 2402
怎么用js设置a标签点击链接改变当前颜色20 例如：多个a标签为白色，当点击其中一个a标签时改变那一个a标签的字体颜色为黄色，并且跳转到对应链接，当点击下一个a标签链接时，下一个为黄色，之前一个恢复成白色，我这样写的可以改变，但是当页面刷新的时候又变成白色了！<li><a id="a1" href="a.html" onclick="Chan...
php面试题及答案(原创)
热门推荐
我的php学习与实践生涯
04-16 7万+
 基础题:1.表单中 get与post提交方法的区别?答:get是发送请求HTTP协议通过url参数传递进行接收,而post是实体数据,可以通过表单提交大量信息.2.session与cookie的区别?答:session:储存用户访问的全局唯一变量,存储在服务器上的php指定的目录中的（session_dir）的位置进行的存放   cookie:用来存储连续訪問一个頁面时所使用，是存储在客户端
利用for循环实现的隔行变色
suxiaxuhuanhuan的专栏
02-27 2913
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档   function get(){  for(var i=1;i   if(i%2!=0){   //给表格的背景加颜色      document.getElementById("d
JavaScript for循环实现表格隔行变色
weixin_30628077的博客
10-19 547
本代码主要演示的是for循环, <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript for循环实现表格隔行变色</title> <script> ...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值