用JS控制表格的交替颜色

最新推荐文章于 2024-07-18 13:52:01 发布
最新推荐文章于 2024-07-18 13:52:01 发布
阅读量1.1k 收藏
点赞数
分类专栏： html+css 文章标签： border table function xhtml html div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lampsunny/article/details/7439402
版权 
<!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>用JS控制表格的交替颜色</title>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
window.onload = function() {
doubleBgColor(document.getElementById("table1"),"#cecece","#ececec")
}

function doubleBgColor(Table,Bg1,Bg2) {
for (var i=0;i<Table.rows.length;i++) Table.rows[i].bgColor=i%2?Bg2:Bg1;
}
</SCRIPT>
<TABLE border=0 cellpadding=1 cellspacing=1 id="table1" width="500">
<TR><TD> 一 </TD></TR>
<TR><TD> 二 </TD></TR>
<TR><TD> 三 </TD></TR>
<TR><TD> 四 </TD></TR>
<TR><TD> 五 </TD></TR>
<TR><TD> 六 </TD></TR>
<TR><TD> 七 </TD></TR>
<TR><TD> 八 </TD></TR>
<TR><TD> 九 </TD></TR>
<TR><TD> 十 </TD></TR>
<TR><TD> 十一 </TD></TR>
<TR><TD> 十二 </TD></TR>
</TABLE>
<table width="100%" border="1" cellpadding="3" cellspacing="0" bordercolor="#efefef" bgcolor="#efefef">
<tr>
<td onMouseOut="this.bgColor='#efefef';this.borderColor='#efefef'"; onMouseOver="this.bgColor='#cccccc'; this.borderColor='#000033'"><div align="left">盛世动漫</div></td>
</tr>
<tr>
<td onMouseOut="this.bgColor='#efefef';this.borderColor='#efefef'"; onMouseOver="this.bgColor='#cccccc'; this.borderColor='#000033'">盛世动漫</td>
</tr>
<tr>
<td onMouseOut="this.bgColor='#efefef';this.borderColor='#efefef'"; onMouseOver="this.bgColor='#cccccc'; this.borderColor='#000033'">盛世动漫</td>
</tr>
<tr>
<td onMouseOut="this.bgColor='#efefef';this.borderColor='#efefef'"; onMouseOver="this.bgColor='#cccccc'; this.borderColor='#000033'">盛世动漫</td>
</tr>
<tr>
<td onMouseOut="this.bgColor='#efefef';this.borderColor='#efefef'"; onMouseOver="this.bgColor='#cccccc'; this.borderColor='#000033'">盛世动漫</td>
</tr>
</table>
</body>
</html>


lampsunny
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用JavaScript更改表格行的背景颜色
02-10 1771
提供表格数据的许多站点使用交替的背景色来增加该数据的可读性。 在开发网站时，我意识到我也想这样做。 问题？ 在我的情况下，该表不是由服务器端应用程序或脚本生成的，您可以在Web上找到大量示例。 显而易见的解决方案是对第二行进行硬编码，以确保其具有不同的背景色。 但是我希望表是动态的，以便可以在表中间添加新行，而无需更改后面各行的背景颜色属性。 我的解决方案使用JavaScript，因为C...
js 实现 设置表格的交替行颜色
03-31
js 实现 设置表格的交替行颜色! 值得下载看看!资源免费,大家分享!!
js代码文字颜色交替变换
05-04
实现一个不错的网页特效，可以直接演示.jquery特效很喜欢 适合商城
html 偶数项 替换,JS通过奇数项和偶数项实现两种背景颜色的表格实现代码
weixin_39691748的博客
07-08 611
原理其实很简单：利用getElementsByTagName得到所有的元素，然后分别为奇数项和偶数项的元素添加背景颜色。核心代码：function color() {//把表头设为紫色var th = document.getElementById("th");th.style.background = "violet"//1.得到所有元素var trs = document.getElemen...
Js实现table单双行交替色
weixin_34336526的博客
08-15 187
　　依稀记得，当初我刚学编程的时候还学过怎么实现表格单双行交替色，现如今早已记不清当时的实现思路，这两天突然想起，没事就自己写了一小段代码，也不知道是否是当年的思路，不过不用纠结这个问题。:） 　　代码很简单，利用纯Js实现表格单双行交替色。 //Js实现表格单双行交替色 function SetTrColor(tableId) { var table = document.g...
JS练习：定时器--背景颜色交替变换
weixin_34211761的博客
10-18 2839
代码： <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 200...
用JS控制表格的交替颜色.rar
07-05
用JS控制表格的交替颜色
JavaScript的颜色切换
weixin_44549398的博客
09-10 671
我们要网页面切换颜色butoon标签按钮肯定是不能少的，在上面写上内联样式和ID值，至于button里面的内容随便。 最后在原生js里面获取四个button标签的ID值，设置button四个不同的颜色样式，之后在里面给body文档标签添加上背景颜色。（注：document和body的两个文档是不同的，body是文档里面的内容，而document则是整个文档，两个文档类型不一样不要搞混喽） ...
用JS控制表格的交替颜色特效代码
03-20
总结一下，用JavaScript控制表格的交替颜色特效主要是通过遍历表格行并根据行的索引来切换背景色，或者使用事件监听和CSS类来实现动态效果。这种方法可以提升表格的可读性，让用户更容易浏览和理解数据。
用CSS控制表格的交替颜色特效代码
03-20
本教程将详细讲解如何使用CSS来实现表格的交替颜色特效，以增强数据的可读性和视觉吸引力。 首先，让我们了解表格的基本结构。在HTML中，表格由`<table>`标签开始，内部包含`<tr>`（行）标签，每一行内有`<td>`...
用CSS控制表格的交替颜色.rar
07-05
在网页设计中，CSS（Cascading Style Sheets）是一种用于定义HTML或XML（包括SVG、XHTML等）...请根据文件名`6`探索这些资源，进一步理解和掌握CSS控制表格交替颜色的技巧。记住，不断练习和实验是提高CSS技能的关键。
利用CSS控制表格table的交替颜色
09-08
本文将详细介绍如何通过CSS控制表格`<table>`的交替颜色，并提供具体的代码示例。 ### 一、基本原理 在HTML中，`<table>`元素用于创建表格，而`<tr>`代表表格的一行，`<td>`则表示表格中的一个单元格。CSS提供了...
使用js编程让表格隔列显示颜色，在点击任意一个单元格时让原有的所有列颜色消失，而单元格所在的一列全部显示出颜色
m0_59648875的博客
09-07 430
使用js编程让表格隔列显示颜色，在点击任意一个单元格时让原有的所有列颜色消失，而单元格所在的一列全部显示出颜色
js之表格隔行换色
chen_xingyao的博客
02-15 528
步骤分析： 第一步：确定事件(onload)并为其绑定一个函数 第二步：书写函数(获取表格) 第三步：获取tbody里面的行数 第四步：对tbody里面的行进行遍历 第五步：获取奇数行和偶数行(角标对2取余) 第六步：分别对奇数行和偶数行设置背景颜色 js代码： &lt;script type="text/javascript"&gt; //1.获取表格 ...
js控制表格单双行颜色交替显示
01-17 346
<script language="JavaScript"> window.onload = function() { var Table=document.getElementById("table1"); var s = Table.rows.length; for (var i=1;i<s;i++) Tabl...
用javascript/css实现GridView行背景色交替、点击行变色
chenxueyong
04-07 144
用javascript/css实现GridView行背景色交替、点击行变色 前几天在博问里发现有人问关于 GridView点击行变色 的问题，突然想起很久很久以前，写过一篇文章 一个简单但常用的表格样式－－鼠标划过行变色－－简洁实现 ，是关于表格行颜色交替和鼠标指向时变色的，正好今天把那一篇补充和扩展一下，加上鼠标点击选择（其实只是点击后变个颜色，“选择”这个词在这里不合适），顺便把这个直接应用到...
jquery交替变换颜色的三种方法 实例代码
toplover2的linux学习博客
11-20 1080
这篇文章主要介绍了jquery交替变换颜色的三种方法，有需要的朋友可以参考一下 复制代码代码如下: even and odd jquery交替变换颜色 - www.jbxue.com $(function(){     alert("第一种");     $("tbody tr:even").css("background-colo
给表格加间隔行颜色
别在熬夜了！
03-06 676
window.onload=function(){ doubleBgColor(document.getElementById("head"),"#eeeeee","#ffffff") } function doubleBgColor(Table,Bg1,Bg2) { for (var i=0;i<Table.rows.length;i++) Table.rows[i].bgColor=i%2?B
web前端基础面试85题（一）
最新发布
柯晓楠
07-18 937
1、什么是HTML语义化？<基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等>根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。2、为什么要语义化？为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
html修改表格颜色
05-28
要修改表格的颜色，也可以使用CSS来实现。以下是一些基本的CSS代码，可以帮助您修改表格的颜色： 1. 修改表格边框颜色 ``` table { border: 1px solid #CCCCCC; /* 修改为您想要的颜色值 */ } ``` 2. 修改表格背景颜色 ``` table { background-color: #FFFFFF; /* 修改为您想要的颜色值 */ } ``` 3. 修改表格标题颜色 ``` th { background-color: #CCCCCC; /* 修改为您想要的颜色值 */ } ``` 4. 修改表格数据行的背景颜色交替显示 ``` tr:nth-child(even) { background-color: #F2F2F2; /* 修改为您想要的颜色值 */ } ``` 以上是一些基本的CSS代码，您可以根据自己的需求进行修改。同样建议使用外部CSS文件来管理您的样式，这样可以使代码更加清晰易于维护。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值