表格隔行换色

最新推荐文章于 2025-04-28 18:30:07 发布
原创 最新推荐文章于 2025-04-28 18:30:07 发布 · 1.8k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#function #xhtml #浏览器 #border #html #css

本文提供五种兼容主流浏览器的表格隔行变色方法，包括纯CSS、JS控制及结合CSS与JS的方式，并附带示例代码。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

网上很多关于表格隔行变色的方法，其实很多都是只能在IE内核浏览器下实现效，别的内核浏览器表现不出来。此文五种表格隔行变色的方法兼容所有现代浏览器(很久以前的古董浏览器未测试过)。

方法一：使用th与td标签控制隔行变色
<!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>方法一 使用th与td标签控制隔行变色 — 实现表格隔行异色的5种解决方案(兼容所有浏览器)</title>
<style type="text/css">
#tab {width: 300px;}
#tab th {font-weight: normal; text-align:left; background: #fff}
#tab td {background: #eee}
</style>
<body>
<table id="tab" border="0" cellpadding="0" cellspacing="0">
<tr>
<th height="25">第一个颜色#fff</th>
<th height="25">第一个颜色#fff</th>
</tr>
<tr>
<td height="25">第二个颜色#eee</td>
<td height="25">第二个颜色#eee</td>
</tr>
<tr>
<th height="25">第一个颜色#fff</th>
<th height="25">第一个颜色#fff</th>
</tr>
<tr>
<td height="25">第二个颜色#eee</td>
<td height="25">第二个颜色#eee</td>
</tr>
</table>
</body>
</html>

方法二：Jjs控制表格隔行变色
<!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控制表格隔行变色 — 实现表格隔行异色的5种解决方案(兼容所有浏览器)</title>
</head>
<body>
<table width="300" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>不变色</td>
</tr>
<tbody id="tab">
<tr>
<td>不变色</td>
</tr>
<tr>
<td>变色#eee</td>
</tr>
<tr>
<td>不变色</td>
</tr>
<tr>
<td>变色#eee</td>
</tr>
</tbody>
<tr>
<td>不变色</td>
</tr>
</table>
<script language="JavaScript">
<!–
var TbRow = document.getElementById("tab");
if (TbRow != null)
{
for (var i=0;i<TbRow.rows.length ;i++ )
{
if (TbRow.rows[i].rowIndex%2==1)
{
TbRow.rows[i].style.backgroundColor="";
}
else
{
TbRow.rows[i].style.backgroundColor="#eee";
}
}
}
//–>
</script>
</body>
</html>
方法三:  js+css实现表格隔行变色&鼠标指向变色A
<!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+css隔行异色和鼠标指向变色A — 实现表格隔行异色的5种解决方案(兼容所有浏览器)</title>
<style type="text/css">
#tab {border-collapse:collapse;border:solid #999;border-width:1px 0 0 1px;width: 300px;}
#tab td {border:solid #999;border-width:0 1px 1px 0;}
#tab tr.t1 td {background-color:#fff;}/* 第一行的背景色 */
#tab tr.t2 td {background-color:#eee;}/* 第二行的背景色 */
#tab tr.t3 td {background-color:#ccc;}/* 鼠标经过时的背景色 */
</style>
</head>
<body>
<table id="tab">
<tr>
<td>第一个颜色#fff</td>
<td>第一个颜色#fff</td>
</tr>
<tr>
<td>第二个颜色#eee</td>
<td>第二个颜色#eee</td>
</tr>
<tr>
<td>第一个颜色#fff</td>
<td>第一个颜色#fff</td>
</tr>
<tr>
<td>第二个颜色#eee</td>
<td>第二个颜色#eee</td>
</tr>
</table>
<script type="text/javascript">
<!–
var Ptr=document.getElementById("tab").getElementsByTagName("tr");
function $() {
for (i=1;i<Ptr.length+1;i++) {
Ptr[i-1].className = (i%2>0)?"t1":"t2";
}
}
window.onload=$;
for(var i=0;i<Ptr.length;i++) {
Ptr[i].onmouseover=function(){
this.tmpClass=this.className;
this.className = "t3";
};
Ptr[i].onmouseout=function(){
this.className=this.tmpClass;
};
}
//–>
</script>
</body>
</html>
方法四： js+css实现表格隔行异色&鼠标指向变色B
<!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+css隔行异色和鼠标指向变色B — 实现表格隔行异色的5种解决方案(兼容所有浏览器)</title>
<style type="text/css" >
.a1{ background-color:#fff;}
.a2{ background-color:#eee;}
#tab{ width:300px; }
</style>
<script type="text/javascript">
<!–
function onloadEvent(func){
var one=window.onload
if(typeof window.onload!='function'){
window.onload=func
}
else{
window.onload=function(){
one();
func();
}
}
}
function showtable(){
var tablename=document.getElementById("tab")
var li1=tablename.getElementsByTagName("tr")
for(var i=1 ;i<li1.length;i++){//表格是这里i=1,即第一行不变色。其他为0比较好.
//(i%2==0)?(li1[i].className="a1") : (li1[i].className=”a2″)
//用这个或下面的if(i%2==0){…}
li1[i].onmouseover=function(){
this.style.fontWeight="bold";//当鼠标指向时字体为粗体
this.style.backgroundColor="#ccc";//当鼠标指向时字体颜色
}
li1[i].onmouseout=function(){
this.style.fontWeight=""
this.style.backgroundColor=""
}
if(i%2==0){
li1[i].className="a1";
}else{
li1[i].className="a2";
}
}
}
onloadEvent(showtable);
–>
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" id="tab">
<tr>
<td colspan="2" bgcolor="#FFFFCC">表格标题行，不设变色效果</td>
</tr>
<tr>
<td>第一个颜色#fff</td>
<td>第一个颜色#fff</td>
</tr>
<tr>
<td>第二个颜色#eee</td>
<td>第二个颜色#eee</td>
</tr>
<tr>
<td>第一个颜色#fff</td>
<td>第一个颜色#fff</td>
</tr>
<tr>
<td>第二个颜色#eee</td>
<td>第二个颜色#eee</td>
</tr>
</table>
</body>
</html>
方法五： js+css实现表格隔行异色&鼠标指向变色C
<!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>05 js+css隔行变色和鼠标指向变色C  — 实现表格隔行异色的4种解决方案(兼容所有浏览器)</title>
<style type="text/css" >
.a1{ background-color:#fff;}
.a2{ background-color:#eee;}
#tab{ width:300px; }
dt{background-color:#0066CC; color:#FFFFFF;}
dd{margin:0px; display:block;}
</style>
<script type="text/javascript">
<!–
function onloadEvent(func){
var one=window.onload
if(typeof window.onload!='function'){
window.onload=func
}
else{
window.onload=function(){
one();
func();
}
}
}
function showtable(){
var tablename=document.getElementById("tab")
var li1=tablename.getElementsByTagName("dd")
for(var i=0 ;i<li1.length;i++){//表格是这里i=1,其他为0比较好.
//(i%2==0)?(li1[i].className="a1") : (li1[i].className=”a2″)//用这个或下面的if(i%2==0){…}
li1[i].onmouseover=function(){
this.style.fontWeight="";
this.style.backgroundColor="#ccc";//当鼠标指向时字体颜
}
li1[i].onmouseout=function(){
this.style.fontWeight=""
this.style.backgroundColor=""
}
if(i%2==0){
li1[i].className="a1";
}else{
li1[i].className="a2";
}
}
}
onloadEvent(showtable);
–>
</script>
</head>
<body>
<dl id="tab">
<dt>标题行，不设变色效果</dt>
<dd>第一个颜色#fff</dd>
<dd>第二个颜色#eee</dd>
<dd>第一个颜色#fff</dd>
<dd>第二个颜色#eee</dd>
</dl>
</body>
</html>
 
 
 
简单的隔行变色：
<style type="text/css">
<!--
tr {background-color:expression((this.sectionRowIndex%2==0)?"#E1F1F1":"#F0F0F0")}
-->
</style>
<table>
<tr><td>第1行</td><td>第1列</td></tr>
<tr><td>第2行</td><td>第2列</td></tr>
<tr><td>第3行</td><td>第3列</td></tr>
<tr><td>第4行</td><td>第4列</td></tr>
<tr><td>第5行</td><td>第5列</td></tr>
</table>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
每个单元格变色：
<style type="text/css">
<!--
tr {background-color:expression((this.sectionRowIndex%2==0)?"red":"blue")}
td {background-color:expression((this.cellIndex%2==0)?"":((this.parentElement.sectionRowIndex%2==0)?"green":"yellow"))}
-->
</style>
<table>
<tr><td>第1行</td><td>第1列</td></tr>
<tr><td>第2行</td><td>第2列</td></tr>
<tr><td>第3行</td><td>第3列</td></tr>
<tr><td>第4行</td><td>第4列</td></tr>
<tr><td>第5行</td><td>第5列</td></tr>
</table>
－－－－－－－－－－－－－－－－－－－－－－－－
以上都用到expression，实现变得很方便，但是，经测试，在IE6（其它版本我不知道）上很正常，在firefox上无任何反应…… ，要想在firefox上也有此效果，就要用第二种方法
 

其实我的博客中对table的各行变色，搜集了不少的这样效果

CSS实现table表格：隔行换色的效果
pan_junbiao的博客
07-12 2102
表格是网页中十分重要的组成元素。表格用来存储数据，包含标题、表头、行和单元格。在HTML语言中，表格标记使用符号表示。定义表格光使用是不够的，还需要定义表格中的行、列、标题等内容。在CSS中，可以使用 nth-child 选择器来实现隔行换色。该选择器用于匹配父元素中的特定子元素，nth-child(odd) 可以匹配奇数行，nth-child(even) 可以匹配偶数行。使用CSS样式实现 table 表格隔行换色的效果。
基于Jquery的表格隔行换色，移动换色，点击换色插件
12-02
在本文中，我们将深入探讨基于Jquery的表格隔行换色、移动换色以及点击换色的实现方式，这涉及到Jquery插件的编写和应用。Jquery是一种强大的JavaScript库，它简化了DOM操作，事件处理，动画效果，以及Ajax交互，而...
HTML对表格隔行变色
qq_38409944的博客
05-16 7648
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;script&amp;gt; window.onload = function(){
HTML使用CSS实现表格隔行变色
weixin_70815247的博客
07-14 4564
HTML使用CSS实现table表格的隔行变色，要用到伪类:nth-child（）
html表格隔行变色
zwld_2233的博客
09-02 1512
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> window.onload = function(){ //1.获取表格 var wor = document.getElementById("biao");.
CSS table表格隔行变色
weixin_45451375的博客
10-20 1051
/设置奇数行颜色/ table tr:nth-child(odd) { background: #ccc; } /设置偶数行颜色/ table tr:nth-child(even) { background: #ccc; }
jquery实现表格隔行换色效果
10-23
在Web开发中，实现表格隔行换色是一个常见的页面美化功能，它不仅能够提高表格数据的可读性，还能让浏览者获得更好的视觉体验。本文将详细介绍使用jQuery库来实现表格隔行换色效果的方法。 ### jQuery简介 jQuery...
实现表格隔行换色效果特效代码
03-20
本教程将详细介绍如何实现表格隔行换色的代码实现。 首先，我们需要了解HTML表格的基本结构。在HTML中，`<table>`标签用于创建一个表格，`<tr>`表示表格行，`<td>`表示单元格。例如： ```html 数据1 数据2 ...
基于JavaScript实现表格隔行换色
11-21
在JavaScript中实现表格隔行换色，主要涉及到以下几个关键点： 1. **表格对象与属性**：HTML中的`<table>`元素在JavaScript中可以通过`document.getElementById()`方法获取到，这个对象提供了访问表格内部元素的...
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
01-19
js代码： css代码： 代码如下: tr.alt td { background:#ecf6fc; /*这行将给所有的tr加上背景色*/ } tr.over td { background:#bcd4ec; /*这个将是鼠标高亮行的背景色*/ }
HTML之表格隔行变色
worn_xiao的博客
09-16 2950
New Document thead tr{ background:#aaf; } .odd{ background:#ccf; } 编号 姓名
html table表格隔行变色,css table表格隔行变色,vue中table表格隔行变色,element ui的table组件，ant-design的table组件
Eli_Code
04-11 5685
HTML table表格隔行变色 :nth-child(): 定义和用法 :nth-child(n) ： 选择器匹配父元素中的第n个子元素。n可以是一个数字，一个关键字，或者一个公式 <style> /*设置奇数行颜色*/ table tr:nth-child(odd) { background: rgb(178, 178, 179); } /*设置偶数行颜色*/
实现 表格 隔行变色 案例
信念之于人，犹翅膀之于鸟，信念是飞翔的翅膀
09-19 651
/ 2.根据元素定位所有的元素->行。为表格设置合并边框模式。//5.为当前元素设置class属性值为bg。//1.定位页面中的元素->表格。失败之前无所谓高手，在失败的面前，谁都是凡人。// 3.循环遍历所有的元素。//4.判断当前行是否为奇数或偶数。//用jQuery方法实现。//用DOM方法实现。
表格隔行换色(CSS版)
忆雨季节
04-13 1325
表格隔行换色 摘自：   http://www.blueidea.com/bbs/NewsDetail.asp?GroupName=Dreamweaver+%26+Javascript%D7%A8%C0%B8&DaysPrune=60&lp=1&id=2232008           表格隔行换色，节省代码的好方法  
HTML 表格的CSS样式-隔行变色
Transform
03-01 2974
HTML 表格的CSS样式-隔行变色 1.代码 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">                 .tableClass         {             border: 1px solid red;
关于table的td和ul元素li隔行变色的功能实现
weixin_34198762的博客
03-10 415
table元素的td和ul元素li隔行变色的功能实现 利用css控制二者的样式轻松实现隔行换色： 例如：table的css样式控制： table tr td{   background-color:颜色1 } table tr td:nth-child(2n+1){    background-color:颜色2 } ul的li样式控制 ul li{   back...
如何用HTML实现表格隔行变色效果
最新发布
2401_87028842的博客
04-28 552
本文主要讲述用HTML来实现表格的隔行变色效果，以及鼠标悬浮时产生变色的效果。
table表格隔行换色
yangxi_info的博客
10-14 204
table tr:nth-child(odd){background:#F4F4F4;} table td:nth-child(even){color:#C00;}
使用CSS实现table隔行变色
Java技术
11-01 7212
方法一：tr:nth-child(odd){background:#F4F4F4;}方法二：tr {background-color:expression((this.sectionRowIndex%2==0)?"red":"blue")}
实现表格隔行换色与点击变色的简洁方法
在表格隔行换色中，常用的是`:nth-child`伪类选择器或`:nth-of-type`选择器来选择奇数或偶数行，并设置不同的背景色。对于点击变色，可以使用`:hover`伪类或JavaScript动态添加类。 ```css /* 隔行换色 */ tr:nth-...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值