Css实现表格奇偶行不同色

隔行换色思路总结 隔行换色(斑马纹效果)是前端开发中常见的需求,通常用于表格、列表等数据展示场景,目的是提升可读性。 阅读详情

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>双色表格CSS实例</title>
<style type="text/css">
#DataGrid1 tr {
    background-color: expression(
        this.sectionRowIndex == 0 ? "#FFCCCC" :
        (
            (this.sectionRowIndex % 2 == 0) ? "#FFF0F0" : "#F0F0FF"
        )
    );
    color: expression(this.sectionRowIndex == 0 ? "#FFFFFF" : "");
    font-weight: expression(this.sectionRowIndex == 0 ? "BOLD" : "");
    TableSelect: expression(
        this.sectionRowIndex == 0 ? "" :
        (
            onmouseover = function()
            {
                this.style.backgroundColor =
                (
                    this.style.backgroundColor != "#69cdff" ? "#69cdff" :
                    (
                        this.sectionRowIndex == 0 ? "#FFCCCC" :
                        (
                            this.sectionRowIndex % 2 == 0 ? "#FFF0F0" : "#F0F0FF"
                        )
                    )
                )
            },
            onmouseout = function()
            {
                this.style.backgroundColor =
                (
                    this.style.backgroundColor != "#69cdff" ? "#69cdff" :
                    (
                        this.sectionRowIndex == 0 ? "#FFCCCC" :
                        (
                            this.sectionRowIndex % 2 == 0 ? "#FFF0F0" : "#F0F0FF"
                        )
                    )
                )
            }
        )
    )
}
#DataGrid1 td {
    background-color:expression(
        this.cellIndex == 0 ?
        (
            this.parentElement.sectionRowIndex == 0 ? "#FFCCCC" : "#DDDDDD"
        )
        : null
    )
}
.FindAreaTable1 {
    font-size: 12px;
    color: #333333;
    text-decoration: none;
    width: 400px;
    cursor: hand;
    background-color: #FFFFFF;
    vertical-align: middle;
    text-align: center;
}
</style>
</head>
<body>
<table cellspacing="1" class="FindAreaTable1" ID="DataGrid1">
  <tr>
    <td>首行首列</td>
    <td>首行</td>
    <td>首行</td>
    <td>首行</td>
    <td>首行</td>
    <td>首行</td>
  </tr>
  <tr>
    <td>行1首列</td>
    <td>行1</td>
    <td>行1</td>
    <td>行1</td>
    <td>行1</td>
    <td>行1</td>
  </tr>
  <tr>
    <td>行2首列</td>
    <td>行2</td>
    <td>行2</td>
    <td>行2</td>
    <td>行2</td>
    <td>行2</td>
  </tr>
  <tr>
    <td>行3首列</td>
    <td>行3</td>
    <td>行3</td>
    <td>行3</td>
    <td>行3</td>
    <td>行3</td>
  </tr>
  <tr>
    <td>行4首列</td>
    <td>行4</td>
    <td>行4</td>
    <td>行4</td>
    <td>行4</td>
    <td>行4</td>
  </tr>
  <tr>
    <td>行5首列</td>
    <td>行5</td>
    <td>行5</td>
    <td>行5</td>
    <td>行5</td>
    <td>行5</td>
  </tr>
</table>
</body>
</html>

小程序表格奇偶行不同背景色设置 wxml <view class='history-table-wrap'> <view class="table mdui-m-t-1"> <view class="tr"> <view class="th">学校</view> <view class="th">年份&... 阅读详情

相关推荐

【css】原生table制作奇偶行不同背景色表格,取消td单元格自带单线

原生table制作奇偶行不同背景色的表格,取消td单元格自带单线等

Weiqian_的博客 1533

【转载】【html】双色表格css实例

双色表格CSS实例#DataGrid1 tr {    background-color: expression(        this.sectionRowIndex == 0 ? "#FFCCCC" :         (            (this.sectionRowIndex % 2 == 0) ? "#FFF0F0" : "#F0F0FF"        )    );   

小溪石子的专栏 869

网页表格隔行换色的实现技巧

简介:网页设计中,使用隔行换色的表格可提高数据可读性和用户体验。本文通过HTML、CSS和JavaScript的结合使用,展示了如何实现动态的表格隔行换色效果。首先解释了HTML表格结构和基本样式设置,然后介绍了JavaScript在动态变化的表格中应用隔行换色功能的实现方法。

weixin_32661831的博客 1093

html 双色表格样式设计

双色表格          th{           background:#00676B;           color:#FF4500;           line-height:20px;           height:30px;         }        td{          padding 6px 11px;          color:

风少爷的博客 1461

实现表格行交替换色的jQuery技术详解

jQuery自2006年问世以来,一直是Web开发中不可或缺的JavaScript库之一。它简化了DOM操作、事件处理、动画制作以及Ajax交互等复杂任务,使得开发者能够快速构建出响应式的交互式网站。jQuery的核心理念是“写得少,做得多”。它通过封装复杂的操作,允许开发者使用简洁的语法来操作HTML文档、处理事件、进行动画效果设计以及使用Ajax与服务器进行数据交互。基本样式定义了表格的基本外观,如边框、单元格间距、背景色等。以下是一些基础样式的定义:table {

weixin_33205138的博客 398

制作双色表格.html

制作双色表格 学习新的技术和方法 制作双色表格 学习新的技术和方法

很容易的制作双色表格

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> StripingTable $(function(){ $(".stripe tr").mouseover(function(){ $(this).addClass("over");}).mo

forBurnInG的专栏 653

3.6KW储能双向逆变器(原理图PCB源码)

通过百度网盘分享的文件:优快云 3.6KW储能双向逆变器 链接:https://pan.baidu.com/s/18NN6KnpywFUIDtAQ4b1LTg?pwd=csdn 提取码:csdn

2401_86562087的博客 2186

双色表格(含页面内容查找功能)(JavaScript)

1. 任务要求 1)简单过滤器的使用; 2)内容过滤器的使用; 3)如何获取指定元素的值? 4)如何设置元素的样式? 2. 需求说明 制作显示如下图所示的页面,要求如下。 (1)当页面加载完毕时,隔行变色,颜色值如上图所示,其中标题行字体颜色为白色,首行背景颜色值为:#00a40c,偶数行颜色值为#a5e5aa。 (2)当鼠标指向某一行时,该行颜色随之改变,当离开那行时,该行颜色恢复原样。 (3)输入相应的查找内容,点击...

weixin_48112113的博客 1404

【电机学复习笔记】同步电机的特性及参数的求取

同步电机的主要特性包括:空载特性、短路特性、零功率因数负载特性、外特性和调整特性。 基于以上特性我们可以实现: 从空载特性和短路特性求同步电抗的不饱和值和短路比; 从零功率因数负载特性和空载特性确定保梯电抗(定子漏抗)和电枢反应电动势

Pantrick_的博客 2万+

RK3568/RK3588之修改8250驱动实现RS485收发的自动切换

在串口发送前,若为485,则将控制引脚拉为发送状态,在发送后,循环查看是否发送完成,若发送完成则将引脚置回读状态,如此一来,就能实现在内核测控制方向切换,而不会因为延时造成数据丢失,经过测试此办法可行。全部修改完成后,重新编译生成内核文件和设备树文件,烧写到板子上即可。

哒宰的博客 3120

表格奇偶行变色

表格的行间隔变色 有如下种方式 方式一:使用纯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....

zwj1030711290的优快云 1662

基于VS2012 C#调用bartender自动打印条形码

GitHub:https://github.com/sanjaywu/BarcodePrintTool 一、在引用添加Interop.BarTender.dll 1、在资源解决方案的引用这里,右击选择“添加引用”: 2、按照如下步骤添加Interop.BarTender.dll引用: 3、添加完成 二、使用bartender工具设置打印模板 1、页面大小设置: 2、条码设置: 三、代码...

Sanjay_Wu的博客 5956

jQuery实现表格间隔色

1、新建一个web项目,jQuery; 2、在WebContent目录下新建script文件夹,将jquery-1.10.1.js复制到script中; 3、同样,新建TableColor.html; TableColor.html: 表格间隔色 body { width:100%; height:100%; fon

游海东的技术专栏 2854

绝缘检测原理和绝缘电阻计算方法

绝缘检测的目的就是计算绝缘电阻,当绝缘电阻低于某个阈值,则很可能会造成电池短路、漏电,威胁人员安全

m0_56208280的博客 4万+

循环神经网络(RNN)

在之前学习了全连接神经网络(DNN)模型,网络结构都是从输入层到隐含层再到输出层,层与层之间是全连接或部分连接的,但每层之间的节点是无连接的。 一、神经网络基础 神经网络可以当做是能够拟合任意函数的黑盒子,只要训练数据足够,给定特定的x,就能得到希望的y,结构图如下: 将神经网络模型训练好之后,在输入层给定一个x,通过网络之后就能够在输出层得到特定的y,那么既然有了这么强大的模型,为什么还需要RNN(循环神经网络)呢? 二、为什么需要RNN(循环神经网络) 考虑这样一个问题,如果要预测句子的下一个单词是什么

小朱小朱绝不认输的博客 2万+

隔行换色(修改版)

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js" ></script> <sty...

NewBeeMu的博客 253

【华为OD机试】真题-小明减肥(Java)

摘要:题目要求从n个可选运动中选取k个,使其卡路里总和等于目标值t,统计可行方案数。输入包含运动数量n、目标t、选择数量k及卡路里数组。采用DFS回溯算法,通过剪枝优化(提前终止无效分支),分别处理选择/不选当前运动的情况。当遍历完所有运动且满足条件时计数。示例输入"4 3 2"和"1 2 3"时,输出2(对应两种选择组合)。Java实现通过递归完成搜索,最终输出符合条件的方案总数。(149字)

u014481728的博客 287

HTML(HBuilder)作业题4- 隔行换色(jquery)

Hbuilder.jquery. 隔行换色

古古的博客 1117

五、MT8168 音频驱动之SPEAKER

本章主要讲解MT8168平台的内部SPEAKER驱动配置。分为HP接法和LINE OUT接法。2.1.3 audio_custom_exp.h设置。2.1.4 mixer_paths.xml设置。2.2.3 mixer_paths.xml设置。2.1.2 ProjectConfig 设置。2.2.2 ProjectConfig 设置。2.2.1 deconfig设置。2.1.1 DTS设置。......

Joon2020的博客 1664

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等,可在创建的窗口进行控制

第四章 WEB04_jQuery篇_第一课

2.1 jquery相关的知识: Jquery它是javascript的一个轻量级框架,对javascript进行封装,它提供了很多方便的选择器。供你快速定位到需要操作的元素上面去。还提供了很多便捷的方法。 怎么使用jquery: Jquery它是一个库(框架),要想使用它,必须先引入! jquery-1.8.3.js:一般用于学习阶段。 jquery-1.8.3.min.js:用于项目使用阶段。 Jquery的简单入门: 所有的jquery代码写在页面加载函数 $(function(){ Jque

weixin_42132959的博客 206

efm32 入门.pdf

本PDF共计22页,介绍的是操作驱动API,下载与否自己斟酌。

纯CSS实现 table 表格奇偶行不同颜色

[摘要]本文介绍纯CSS实现 table 表格奇偶行不同颜色,并提供详细的示例代码供参考。 CSS代码: View Row Code 1 .table-striped tbody tr:nth-child(odd) td { 2 background-color: Red  ; 3 }

jinyeweiyang的专栏 8418

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

表格奇偶行颜色不同html

<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>表格奇偶行颜色不同html</title> <style type="text/css"> table { width: 60%; margin

43612538的博客 3236

antd中table表格奇偶行设置不同样式(颜色交替)

前言 在做antd表格时通常会用到table组件,如何修改antd组件的默认样式想必大家都知道,那么我们如何将表格的奇数行和偶数行设置为不同样式呢,如下图所示 react中覆盖antd组件的样式 渲染时给奇偶行设置不同类名 利用Table组件官方API接口修改行的类名,通过类名设置不同行的样式. js文件TableChangeDom.js /** * @file 列表奇偶行设置不同样式;渲染时给奇偶行设置不同类名 * */ import React from "react"; import {

天心天地生的博客 6956

【前端】实现表格奇偶行不同背景样式

在这里插入代码片@TOC 实现表格奇偶行不同背景样式 实现表格等奇偶行的不同样式 Css实现 :nth-child() 选择器: :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。 n 可以是数字、关键词或公式。 tr:nth-child(odd){ background:#000; } tr:nth-child(even){ background:#fff; } 纯JavaScript实现 var tableDemo=document.getElementById

sunshine641的博客 663
上一篇: css 设置好TD 同时存在treeview与gridview的时候
下一篇: 关于oracle的表空间,分区表,以及索引的总结
rubychen410
博客等级 码龄19年 32粉丝 95原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值