网上找到一个用不同颜色显示表格奇偶行的例子

最新推荐文章于 2020-08-06 15:23:48 发布
最新推荐文章于 2020-08-06 15:23:48 发布
阅读量738 收藏
点赞数
分类专栏： 经验技巧之Javascript 文章标签： function null css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/daryl715/article/details/1894446
版权
导读：
　　
　　
　　
　　 双色表格CSS实例
　　
　　
　　
　　
















































　　
　　
首行首列
　　
首行
　　
首行
　　
首行
　　
首行
　　
首行
　　 　　
　　
行1首列
　　
行1
　　
行1
　　
行1
　　
行1
　　
行1
　　 　　
　　
行2首列
　　
行2
　　
行2
　　
行2
　　
行2
　　
行2
　　 　　
　　
行3首列
　　
行3
　　
行3
　　
行3
　　
行3
　　
行3
　　 　　
　　
行4首列
　　
行4
　　
行4
　　
行4
　　
行4
　　
行4
　　 　　
　　
行5首列
　　
行5
　　
行5
　　
行5
　　
行5
　　
行5
　　 　　
　　
　　
　　另外，我 以前还看到过另外几种简单的方式，等以后有空再把它们找回来。

本文转自
http://blog.csdn.net/zhangxiaoxiang/archive/2007/10/06/1813423.aspx
daryl715
关注
专栏目录
table中tr背景色高亮显示动态设置
荒的博客
04-27 9317
选中其中一列的复选框时，该复选框所在行的背景色高亮显示（黄色）。取消选中复选框时，所在行的背景色恢复。界面显示效果如图-1所示 员工信息 div{ width:70%; padding:10px; margin:10px auto; border:5px solid #CCC; } h2{ text-align:center;
自己对“用不同颜色显示表格奇偶行的例子”扩充了用不同颜色显示鼠标单击的行
张孝祥专栏
10-10 6590
主要是在原来的css基础上增加了一个自定义的RowSelect属性，这个属性通过expression表达式进行设置，我现在的感觉是expression中必须是一个?表达式，在?表达式中才能写我们想要的javascript方法，等以后有时间了再专门来求证这个疑问。如果是我猜想的这样，哪有什么更好的替代方式吗？这种替代方式就是behavior吗？一切都安排在以后清闲了再研究吧！ 双色表格CSS实例
layui数据表格偶数行背景颜色
九亿宅男的梦的博客
04-09 2888
,limits:[10,20,30,40,50,60,70,80,90], done: function (res, curr, count) {// 表格渲染完成之后的回调 var that = this.elem.next(); res.data.forEach(function (item, index) { //console.log(item.empNa...
DBGridEh奇偶行不同颜色及选中行或单元格特殊颜色显示
展翅欲飞
03-05 4415
原代码因为TGridDrawState名字空间冲突问题使用了TGridDrawState名字空间，在SQLSERVER2000中测试通过。TGridDrawState名字空间冲突问题及解决方法 http://blog.csdn.net/gxsky/archive/2009/03/05/3958173.aspx  DBGridEh奇偶行不同颜色及选中单元格特殊显示，代码如下：void
antd中table表格奇偶行设置不同样式(颜色交替)
天心天地生的博客
08-06 6292
前言 在做antd表格时通常会用到table组件,如何修改antd组件的默认样式想必大家都知道,那么我们如何将表格的奇数行和偶数行设置为不同样式呢,如下图所示 react中覆盖antd组件的样式 渲染时给奇偶行设置不同类名 利用Table组件官方API接口修改行的类名,通过类名设置不同行的样式. js文件TableChangeDom.js /** * @file 列表奇偶行设置不同样式;渲染时给奇偶行设置不同类名 * */ import React from "react"; import {
用不同颜色显示表格奇偶行的例子
iteye_6976的博客
07-30 191
开发者在线 Builder.com.cn 更新时间:2008-01-09作者：张孝祥 来源:CSDN 本文关键词： 奇偶行 表格 显示 不同颜色 主要是在原来的css基础上增加了一个自定义的RowSelect属性，这个属性通过expression表达式进行设置，我现在的感觉是expression中必须是一个?表达式，在?表达式中才能写我们想要的javascript方法，等以后有时间了再...
表格奇偶行变色
zwj1030711290的CSDN
12-16 1491
表格的行间隔变色 有如下种方式 方式一:使用纯css table.dictionaryList tr:nth-child(2n+1){ background-color:#c0e0f7;}table.dictionaryList tr:nth-child(2n+0){ background-color:#defcfe;} 说明 :n从零开始:0,1,2,3....
当鼠标经过表格数据行时颜色不同且奇偶行颜色也不同
12-13
### 当鼠标经过表格数据行时颜色不同且奇偶行颜色也不同的实现方法 在Web开发中，为了提高用户体验，我们经常需要对表格进行美化。其中一个常见的需求是：当鼠标悬停在表格的数据行上时，该行的颜色会发生变化；...
利用static实现表格的颜色隔行显示的代码
10-30
在网页设计和开发中，为了提升用户体验，通常会采用一些视觉技巧来增强数据展示的效果，其中一种常见的方法就是隔行显示不同颜色的表格。这使得用户在浏览大量数据时能更轻松地区分不同的行。标题提到的“利用static...
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
10-22
在这个例子中，我们将深入探讨如何使用jQuery创建一个插件，以实现表格隔行变色以及鼠标滑过时的高亮显示效果。 首先，我们来看一下基本的HTML结构，这里包含了一个简单的表格，用于展示插件的效果： ```html ...
基于JQuery的js排序与表格颜色交替显示
03-23
在这个例子中，我们遍历表格中的每一行，并根据行号（索引）的奇偶性添加不同的CSS类。然后，在CSS中定义这两个类的背景色，就可以实现颜色交替的效果。 然而，如果表格内容是动态加载或者分页的，我们需要确保在新...
html table奇偶行颜色设置
qq_40771567的博客
09-06 3458
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。n 可以是数字、关键词或公式。 下面的例子, 设置表格的奇偶行背景颜色不同；单独设置表格的第1列背景颜色不同。 效果: <!DOCTYPE html> <html> <head> <style type="text/css"> ...
自己对“用不同颜色显示表格奇偶行的例子”扩充了用不同颜色显示鼠标单击的行 - 张孝祥专栏 - CSDNBlog
我的世界我的梦
11-20 771
双色表格CSS实例 .test { background-color:red; } #DataGrid1 tr { background-color: expression( this.sectionRowIndex == 0 ? "#FFCCCC" : ( (this.sectionRowIndex % 2 == 0) ? "#FFF0F0" : "#F0F0FF" ) ); c
原生js解决表格奇偶列显示
ChyoD1811的博客
01-15 361
本方案重点在于掌握table的 rows属性和 row的cells属性. 解决的问题: 例子: 奇偶列不同颜色显示 个人实际运用: 表格内部内容我想要让内容相对靠近, 奇数列靠右,偶数列靠左, 用以替换IE8不兼容的CSS3伪类选择器 <!DOCTYPE html> <html> <head> <meta charset="utf-...
window.open在当前页面打开网页
热门推荐
我的世界我的梦
04-18 2万+
function geturl(selurl){  if(selurl.value==) return;    window.open(selsite.options[selsite.selectedIndex].value,"_self");}无标题文档      请选择站点  www.wohu.comhttp://www.sohu.com">www.wohu.com>  www.126
固定表头带滚动条的HTML表格
我的世界我的梦
11-14 1万+
                                   商场本月销售统计表                                商品名             上旬             中旬             下旬             　                                                       
使用双重for循环动态地创建一个表格，并且使奇偶行的背景颜色交替变化。
最新发布
09-11
使用双重for循环来动态创建一个表格，并实现奇偶行背景颜色交替变化，通常是在网页开发中完成的，尤其是在JavaScript结合HTML和CSS时。以下是基本的实现步骤： 1. 使用HTML定义表格的基本结构。 2. 利用JavaScript，特别是双重for循环，动态地往表格中添加行和单元格。 3. 在添加每一行时，通过判断行索引的奇偶性来设置不同的背景颜色。 下面是一个简单的示例代码： HTML部分: ```html <!DOCTYPE html> <html> <head> <title>动态创建的表格</title> <style> .even-row { background-color: #f2f2f2; } .odd-row { background-color: #ffffff; } </style> </head> <body> <div id="table-container"></div> <script src="script.js"></script> </body> </html> ``` JavaScript部分 (script.js): ```javascript function createTable(rows, cols) { var tableContainer = document.getElementById('table-container'); var table = document.createElement('table'); table.setAttribute('border', '1'); for (var r = 0; r < rows; r++) { var tr = document.createElement('tr'); for (var c = 0; c < cols; c++) { var td = document.createElement('td'); td.textContent = '单元格'; tr.appendChild(td); } // 根据行的奇偶性设置不同的背景颜色 if (r % 2 === 0) { tr.className = 'even-row'; } else { tr.className = 'odd-row'; } table.appendChild(tr); } tableContainer.appendChild(table); } // 创建一个5行5列的表格 createTable(5, 5); ``` 在这个示例中，我们定义了一个`createTable`函数，它接受行数和列数作为参数。然后，我们使用双重for循环来添加行和单元格，并根据行的索引是奇数还是偶数，分别给行元素添加不同的类名（`.even-row`或`.odd-row`）。CSS样式定义了这两个类的不同背景颜色。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值