实现表格隔行变色

最新推荐文章于 2021-07-24 11:37:00 发布
最新推荐文章于 2021-07-24 11:37:00 发布
阅读量618 收藏 1
点赞数
分类专栏： javascript 文章标签： table javascript function class c
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sd2131512/article/details/4571886
版权

<table class="datalist" id="oTable">

先写好两个tr的class.如class1,class2

 

 

1.使用javascript

 

window.οnlοad=function(){

 

var table=document.getelementbyId("oTable");

for (var i=0;i<=table.rows;i++){

     if (i%2==0){

 

table.rows[i].className="class2";

 

}

 

}

 

}

 

 

2.使用jquery

 

<script language="javascript" src="jquery.min.js"></script>

 

 

$(function(){

 

     $("table.datalist tr:nth-child(odd)").addClass("class2";);

});

 

 

 

 

 

完整例子:

test.html

 

 

<html>
<head>
<style type="text/css">
#pageContent{width: 100%;}

#innerContent{}

.pageContent table{width: 100%;margin-top: 3px;border: solid 1px #CCCCCC; text-align: center;}

.pageContent th{background-color: #C0C9D0; height: 22px;}

.pageContent table a{color: #144AA0;}

 

.pageContent table .icon{width: 32px;}

.pageContent table .caption{text-align: left;}

.pageContent table .point{width: 30px;}

.pageContent table .author{width: 110px;}

.pageContent table .replyCount{width: 60px;}

.pageContent table .lastReply{width: 120px;}

.pageContent table .function{width: 32px;}

 

.pageContent table .caption a{color: #333333;}

 

.pageContent table .light{}

.pageContent table .dark{background-color: #F5F5F5;}

 

</style>

</head>


<body>

<div class="pageContent">
<table class="datalist" >
<tr>
<th>
名次
</th>
<th>
专家
</th>
<th>
积分
</th>

</tr>

 

<tr>
<td>
1
</td>
<td>
madixin
</td>
<td>
111
</td>
</tr>


<tr>
<td>
2
</td>
<td>
yaoming
</td>
<td>
222
</td>
</tr>

 


</table>

</div>

<script language="JavaScript" type="text/javascript" src="js/jquery-1.3.2.min.js"></script>


<script language="JavaScript" type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
  <script type="text/javascript">

  //奇数行变色

  $(function(){
  $("table.datalist tr:nth-child(odd)").addClass("dark");
  });

 

 

  $("table.datalist tr").hover(
  function(){
    $(this).addClass("dark");    //鼠标经过添加hover样式
  },
  function(){
    $(this).removeClass("dark");   //鼠标离开移除hover样式
  }
);

</script>

 


</body>
</html>

 

 

sd2131512
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery表格之隔行变色
Java技术
07-15 1532
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> table { margin: auto; } </style> <...
jquery实现表格隔行变色
LHH201016的博客
08-22 1872
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>变色表格</title> <script src="jquery-3.6.0.js"></script> </head> <body> <table b...
页面表格怎么实现隔行异色、隔行变色
chaochao52001的博客
06-05 517
举例：采用 css+js 的方法，实现表格的隔行异色，需要如下几步： 定义 css 表格样式，如边框、宽度、颜色 在 js 中，创建 func()函数，并通过 onload 设置页面加载完成时，调用 func() 函数 通过 getElementById、getElementsByTagName 方法获得表格所有的行对象，通过 for 循环遍历表格每一行，根据奇偶行调用不同的样式类。 如果需要处理的表格较多，每次这样写会很麻烦。 一般报表工具都能支持这种功能，只需要使用内
HSSFWorkbook And SXSSFWorkbook样式设置
热门推荐
My-Dream
09-18 2万+
直插正题： HSSFWorkbook  创建样式： HSSFCellStyle style = workbook.createCellStyle(); 一、设置背景色: cellStyle.setFillForegroundColor((short) 10);// 设置背景色，颜色的索引还必须是 0x08 ~ 0x40 (8 ~ 64) 的数字     自定义颜色，如果
jQuery实现表格隔行变色
叶为正的博客
11-06 4597
隔行变色 在很多项目中，当然可以避免使用table，而使用div来替代，但是为了能够快速的交付项目，而且对网络优化以及搜索引擎没有太高的妥协的话，我们当然可以使用喜闻乐见的表格来进行布局。使用表格布局非常适合项目团队中有很多都是新成员，技术尚未成熟到可以从容判断div的布局会带来什么问题的情况。下面是使用table进行布局实现表格中隔行变色以及关键字高亮显示的jQuery实现。 这里要注意几个
前端实现表格隔行变色
weixin_41551266的博客
09-05 1551
1.  CSS方法实现：   tr {background-color:expression((this.rowIndex % 2==0)?"red":"blue")}     此处有必要说明一下，expression是css的一个属性，用法是获取圆括号中javascript中的值作为css的属性值，IE5以上支持；   (css3方法)    tr：nth-child(odd){ ...
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
10-22
在这个例子中，我们将深入探讨如何使用jQuery创建一个插件，以实现表格隔行变色以及鼠标滑过时的高亮显示效果。 首先，我们来看一下基本的HTML结构，这里包含了一个简单的表格，用于展示插件的效果： ```html ...
js实现表格隔行变色
01-08
这里提到的"js实现表格隔行变色"就是一种通过JavaScript来动态改变HTML表格行背景色的技术。在给出的代码示例中，我们看到一个简单的实现方式。 首先，`window.onload`事件是JavaScript中的一个常见事件，它表示当...
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
08-31
在本文中，我们将讨论如何利用 Bootstrap 实现表格隔行变色、hover 变色以及在需要时显示滚动条的效果。 首先，为了实现这些功能，我们需要引入 Bootstrap 的 CSS 和 JavaScript 文件。在 HTML 文档的 `<head>` ...
从数据库读取数据。在页面用表格显示，并实现隔行换色
MZ199290的博客
10-26 893
<% session.setAttribute("prolist", new ProductDao().Allproducts()); response.sendRedirect("index.jsp"); %> 商品列表 商品名称 产地 价格 <tr
实现表格隔行变色的方法
weixin_42771133的博客
08-29 2471
css实现表格隔行变色： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; #data{ border-collapse: collapse;
实现表格隔行/隔列变色
young的博客
11-13 3564
table tr:nth-child(odd){background:#F4F4F4;} table td:nth-child(even){color:#C00;} table tr:nth-child(5){background:#73B1E0;color:#FFF;}
jQuery--表格隔行变色
LHH201016的博客
07-24 559
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>变色表格</title> <script src="jquery-3.6.0.js"></script> </head> <body> <table b...
前端简单入门第十八讲 使用jQuery实现表格的隔行换色
李阿昀的博客
05-10 7808
还记得之前我使用JavaScript来实现表格的隔行换色效果吗？如果读者初次翻阅本文，可记得看看教你一天玩转JavaScript(六)——使用JavaScript完成后台数据展示表格的隔行换色！现在我就来使用jQuery完成对数据表格进行隔行换色的显示效果，显示效果为： 要实现该效果，必然要了解以下两个知识点： jQuery的基本过滤选择器： :odd：匹配所有索引值为奇数的元素，从0开始计
表格隔行变色
娓娓道来
08-06 808
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { ...
java生成excel文件并且隔行换色。
springboot2.0以上整合security的基本环境搭建
02-16 1351
实体类实例： @Data @Table(name = "test_user") @Entity @ExcelTarget(value = "userDO") //目标实体类 public class UserDO implements Serializable{ @Id @GeneratedValue(strategy = GenerationType.IDENTITY) ...
使用CSS实现table隔行变色
Java技术
11-01 7114
方法一：tr:nth-child(odd){background:#F4F4F4;}方法二：tr {background-color:expression((this.sectionRowIndex%2==0)?"red":"blue")}
案例五：实现表格隔行换色
真香号
05-25 1549
描述：技术分析 1、使用新的标签将表头中的行和表格中的行区分 <thead></thead>和<tbody></tbody> 2、确定事件 onload()。页面一加载便要显示 3、获取元素：获取表格(表格定义id，使用document.getElementById())。最终是为了获取表格中tbody...
JavaScript实现表格隔行变色与鼠标悬停变色代码示例
- 使用 `for` 循环遍历li元素，通过条件判断和样式修改实现隔行变色效果。 - 当鼠标悬停在列表项上时，改变背景颜色，离开时恢复原色。 4. 应用示例： - 文档中提到了三个不同的UL ID（'content', 'content2', '...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值