奇偶行table颜色不同

最新推荐文章于 2024-03-13 15:52:15 发布
最新推荐文章于 2024-03-13 15:52:15 发布
阅读量5.5k 收藏
点赞数
分类专栏： html 文章标签： table border xhtml 平台 html 文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/czbing308722240/article/details/7899701
版权

<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
  td {
  text-align:center
  }
    tr{    background:#FFF;    }             
  tr:nth-child(2n){         background:#F0F0F0; }
 tr{         background-color: expression((this.sectionRowIndex % 2 == 0) ? "#FFF" : "#F0F0F0" );}


</style>
</head>
<body>

<p align="center"><strong>大汉三通Lares服务平台Lboss请求统计</strong></p>
<table width="288" height="154"     border=1 align="center" cellpadding="0"  cellspacing="0" borderColor="#000000" bgcolor="#CCCCCC" style="BORDER-COLLAPSE: collapse">
  <tr>
    <th>数据描述</th>
    <th>总数</th>
  </tr>
  <tr>
    <td>失败总数</td>
    <td>27</td>
  </tr>
  <tr>
    <td>成功总数</td>
    <td>61298</td>
  </tr>
  <tr>
    <td>Lboss请求成功数 </td>
    <td>8621</td>
  </tr>
  <tr>
    <td>Lboss请求失败数</td>
    <td>0</td>
  </tr>
  <tr>
    <td>MQ请求成功数 </td>
    <td>52677</td>
  </tr>
  <tr>
    <td>MQ请求失败数 </td>
    <td>27</td>
  </tr>
  <tr>
    <td>非法请求数 </td>
    <td>19</td>
  </tr>
</table>
<p align="center"><strong>大汉三通Lares服务平台Lboss最近请求</strong></p>
<table width="514" height="160"     border=1   align="center" cellpadding="0" cellspacing="0" borderColor=#000000 bgcolor="#CCCCCC"  style="BORDER-COLLAPSE: collapse" >
  <tr>
    <th  bordercolor="#000000">数据描述</th>
    <th  bordercolor="#000000">终端号</th>
    <th  bordercolor="#000000">时间</th>
  </tr>
  <tr>
    <td bordercolor="#000000">最近成功请求</td>
    <td bordercolor="#000000">0000064614541875</td>
    <td bordercolor="#000000">2012-08-06 14:10:12</td>
  </tr>
  <tr>
    <td bordercolor="#000000">最近失败请求</td>
    <td bordercolor="#000000">0000064614501994</td>
    <td bordercolor="#000000">2012-08-06 09:47:58</td>
  </tr>
  <tr>
    <td bordercolor="#000000">最近非法请求 </td>
    <td bordercolor="#000000">0000064614802441</td>
    <td bordercolor="#000000">2012-08-06 08:12:43 </td>
  </tr>
  <tr>
    <td bordercolor="#000000">最近Lboss失败请求 </td>
    <td bordercolor="#000000">---</td>
    <td bordercolor="#000000">---</td>
  </tr>
  <tr>
    <td bordercolor="#000000">最近MQ失败请求 </td>
    <td bordercolor="#000000">0000064614501994</td>
    <td bordercolor="#000000">2012-08-06 09:47:53 </td>
  </tr>
  <tr>
    <td bordercolor="#000000">最慢响应请求 </td>
    <td bordercolor="#000000">0000064685040174</td>
    <td bordercolor="#000000">2012-08-06 10:54:09</td>
  </tr>
</table>
</body>
</html>

冰之萃
关注
专栏目录
html table奇偶行颜色设置 (CSS选择器)
weixin_34258782的博客
01-06 1131
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。n 可以是数字、关键词或公式。 下面的例子, 设置表格的奇偶行背景颜色不同；单独设置表格的第1列背景颜色不同。 1 &lt;!DOCTYPE html&gt; 2 &lt;html&gt; 3 &lt;head&gt; 4 &lt;style type="text/...
表格奇偶行设置不同颜色的核心JS代码
10-26
表格奇偶行设置不同颜色，在某些情况下还是比较实用的，下面有个不错的示例，大家可以参考下，希望对大家有所帮助
Jquery表格奇偶行不同颜色
The Best or Nothing!
11-02 240
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;%@ page language="java" contentType="text/html; charset=UTF-8"%&gt;
php输出table表格奇偶行不同颜色,jQuery实现表格奇偶行显示不同背景色 就这么简单...
weixin_35728089的博客
03-10 552
做表格的时候，经常要让奇偶行显示不同背景色，一来使表格显得更美观，二来使同行数据查找更快捷方便。通常我们是怎么实现的呢？就是在每个tr标签上加css样式。代码如下所示：.odd {background-color:yellow;}.even {background-color:red;}No.10001No.20002No.30003No.40004显示效果：但是假设表格有上百行甚至上千行，同时不...
表格的奇偶行设定不同的颜色，单击变色
ilwtfqqc的博客
01-21 420
style .selected{ background-color:#FF6;} .se{background-color:#666;} .even{background:#ecf6fc;  } .odd{background:#F0F0F0;      } .over{background:#bcd4ec;      } .click{background:Aqua;     
当鼠标经过表格数据行时颜色不同且奇偶行颜色也不同
09-25
10. 样式重置：在代码的注释部分提到了“设置鼠标经过颜色的变化”以及“设置奇偶行颜色的交替”，这表明了在实际开发中，可能会涉及到CSS的重置（resetting）或归一化（normalizing）技巧，即消除不同浏览器间的...
jquery css 设置table的奇偶行背景色示例
10-25
在网页设计与开发中，为了提高表格数据的可读性，我们经常需要对表格中的奇数行和偶数行设置不同的背景颜色。这种做法不仅可以使表格看起来更加美观，还能帮助用户更轻松地识别不同行的数据。本文将详细介绍如何使用...
table 设置奇偶行颜色不一样
weixin_46600931的博客
09-15 831
项目需求，采用ant design table展示数据，需要点击行变色，表格行之间有颜色区分。
让el-table奇数行偶数行颜色不一样
fenfen5162的博客
03-13 1026
让el-table奇数行偶数行颜色不一样
纯CSS实现 table 表格奇偶行不同颜色
jinyeweiyang的专栏
09-29 8245
[摘要]本文介绍纯CSS实现 table 表格奇偶行不同颜色，并提供详细的示例代码供参考。 CSS代码： View Row Code 1 .table-striped tbody tr:nth-child(odd) td { 2 background-color: Red  ; 3 }
DataGridView 奇偶行背景颜色定义
weixin_34184561的博客
06-03 1290
由于DataGridView有时的数据实在很多，如果只是网格线也看起来也是不爽滴说。 所以改变一下奇偶行的颜色，改为一行白色一行浅色，看起来爽多了.. 1.需要添加一个事件（DataBindingComplete）： code: private void dgvBeforeGZ_DataBindingComplete(object send...
纯css table奇偶行背景不同
热门推荐
赶路人儿
06-18 1万+
css代码 .table-striped tbody tr:nth-child(even) td, .table-striped tbody tr:nth-child(even) th {background-color:#D4FFFF;} .table-striped tbody tr:nth-child(odd) td, .table-striped
bootstrapTable隔行变色
qq_40308101的博客
07-26 979
rowStyle: function (row, index) {//隔行变色 let classesArr = ['success', 'info']; let strClass; if (index % 2 === 0) {//偶数行 strClass = classesArr[0]; } else {//奇数行 strClass = classesArr[1]; } return {classes: strClass};
:nth-child(n)
lxw1844912514的博客
04-28 384
规定属于其父元素的第二个子元素的每个 p 的背景色： p:nth-child(2) { background:#ff0000; } 1定义和用法 :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。 n 可以是数字、关键词或公式。 该选择器选取父元素的第 N 个子元素，与类型无关。 2 :nth-of-type() 选择器，该选择器选取父元素的...
ant-design-vue vue2 a-table行间隔颜色控制，奇偶行颜色
LlanyW的专栏
11-04 3623
a-table>要单独设置颜色实现需要css穿透方式实现，而且要指定特定class名字否则会影响所有table。如标题所说，table的行颜色一样不明显，需要行间隔颜色明显，逻辑是通过奇偶行数来单独设置颜色。这个是写在模版.vue文件最后 里面。
给antd中table表格奇偶行设置不同样式（背景颜色交替）
Afterwade的博客
12-29 6295
今天在写大屏的时候碰到一个需求，需要将table表格展示的数据每一行背景颜色交替，翻阅资料后，完成了这个需求。 如下图： table组件中有个rowClassName属性，让我们可以通过给每一行添加不同的类名然后设置不同行的样式 jsx代码： import React, { Component } from 'react'; import {Layout,Select,Table} from 'antd' import './index.less' const { Option } = Select;
table 那些事（不同行颜色不同，自动滚动，定位高亮，表头固定）
gongpan2468的博客
10-31 726
UI框架能满足部分需求，但是偶尔也需要自己手写些css与js满足一些要求。 无论是vue还是其他框架，实现table效果的本质是不变的，都是js。这里给出vue版本，其他前端同样适用 table在任何一个系统中都是会用到的，以下就是一些table的常用效果。 一，换行颜色 原生版（菜鸟上的例子）： https://www.runoob.com/try/try.php?filename=t...
JS table布局显示奇数偶数行的颜色
qhx556的专栏
04-17 4771
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">             //        $(function () {         //            $('tr:even:not(#tr1)').css('background-c
使用双重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、付费专栏及课程。

余额充值