CSS隔行换色

最新推荐文章于 2024-09-30 16:36:43 发布
最新推荐文章于 2024-09-30 16:36:43 发布
阅读量1k 收藏
点赞数
分类专栏： CSS 文章标签： css function table list null c

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS</title>
<style type="text/css">
#list_details tr {
 background-color: expression(this.sectionRowIndex==0?"navy":((this.sectionRowIndex % 2 == 0)?"azure":"lavender"));
 height: expression(this.sectionRowIndex==0?"30px":"20px");
 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!="powderblue"?"powderblue":(
    this.sectionRowIndex==0?"navy":(
    this.sectionRowIndex%2==0?"azure":"lavender")))
   },
   οnmοuseοut=function() {
    this.style.backgroundColor=(
    this.style.backgroundColor!="powderblue"?"powderblue":(
    this.sectionRowIndex==0?"navy":(
    this.sectionRowIndex%2==0?"azure":"lavender")))
   }
  ))
}

#list_details td {
 background-color: expression(this.cellIndex==0?(this.parentElement.sectionRowIndex==0?"white":"#C0C0C0"):null);
}

table {
 font-size: 12px;
 text-decoration: none;
 width: 600px;
 cursor: pointer ;
 background-color: darkgray;
 vertical-align: middle;
 text-align: center;
}

#list tr {
 background-color: expression((this.sectionRowIndex%2==0)?"azure":"lavender");
 height: expression(this.sectionRowIndex==0?"30px":"20px");
 TableSelect: expression(
  οnmοuseοver=function() {
   this.style.backgroundColor=(
   this.style.backgroundColor!="powderblue"?"powderblue":(
   this.sectionRowIndex%2==0?"azure":"lavender"))
  },
  οnmοuseοut=function() {
  this.style.backgroundColor=(
   this.style.backgroundColor!="powderblue"?"powderblue":(
   this.sectionRowIndex%2==0?"azure":"lavender"))
  }
  )
}
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0">
<table cellspacing="1" id="list">
 <tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
 </tr>
</table>
</body>
</html>

祥洋
关注
专栏目录
Css隔行变色
weixin_68665302的博客
06-09 1157
csscss样式 table { line-height: 25px; margin: 0px auto; border:gainsboro; } h3{ font-weight: 400; font-size:40px ;
CSS 隔行换色
不生产代码_代码的搬运工的博客
07-10 916
$("tr :gt(0) :odd")  奇数(大于0)$("tr :even")  偶数(大于0)
实现网页表格隔行换色与点击变色效果
最新发布
weixin_30600615的博客
09-30 1266
本文还有配套的精品资源，点击获取 简介：本教程详细介绍了如何使用HTML、CSS和JavaScript实现网页表格隔行换色以及点击整行变色的效果。隔行换色通过CSS选择器实现，增加用户体验并使内容更易读。点击变色效果则需要JavaScript或jQuery支持，通过添加事件监听器和切换CSS类来实现选中行的视觉变化。这两种技术结合使用可提升用户与表格数据交互的体验。 ...
css 隔行换色
sunsineq的专栏
07-22 742
css 隔行换色 nth-child(n)中的n不仅仅可以是单个数字，也可以是一个表达式，如例： <style> .mytable tr:nth-child(2n){ background-color: red; } .mytable tr:nth-child(2n-1){ background-color: blue; } </style> <table class="mytable"> <tr&g...
CSS之隔行换色
badbad_boy的专栏
04-21 923
        .dataList        {            border-style: solid;            border-collapse: collapse;            border-width: 1px;        }        .dataList tr        {            background-color: expres
CSS中的隔行换色
xxxatt的专栏
09-11 1017
一.表格的隔行换色 tr {background-color:expression((this.sectionRowIndex==0)?"":(this.sectionRowIndex%2==0)?"red":"blue")}-->第1行第1行第2行第2行第3行第3行第4行第4行第5行第5行 二.表格的td换色 tr {background-color:expression((this.secti
JS+CSS实现Li列表隔行换色效果的方法
10-24
本篇将介绍如何使用JavaScript (JS) 和 Cascading Style Sheets (CSS) 实现 `li` 列表元素的隔行换色效果。首先，我们需要理解 CSS 的基本样式设置以及 JavaScript 如何操作 DOM（文档对象模型）中的元素。 1. **...
CSS网页隔行换色技巧
01-19
CSS隔行换色的问题，其实很简单，您可以根据您的需要，采用下面的任何一种方法，当然，要适合你的编码与需求情况：一、background背景图片　如果行高固定的话，推荐使用背景图，也推荐将行高固定！兼容一切浏览器。...
CSS实现网页中的隔行换色代码
12-11
在CSS标准布局中，我们通常用`<ul>`和`<li>`元素替代传统的表格结构，但这导致了原有的隔行换色技巧不再适用。一个早期尝试是通过给`<li>`元素添加不同的`class`来实现颜色切换，例如： ```html <li class="one">...
CSS expression 隔行换色效果
09-25
在本例中，我们将探讨如何使用CSS expression以及JavaScript来实现隔行换色的效果。 首先，让我们来看看CSS expression的使用。在提供的代码中，`expression(this.sourceIndex%2==0?'#9FB7F6':'#B6C8F8')` 是一个...
纯css之隔行换色
小码农吗
12-15 2073
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css3隔行变换色</title> <style type="text/css"> #list1 li:nth-of-type(odd){ background:#00ccff;}奇数行 #list1 li:nth-of-type(even){ backgro
网页设计制作CSS实现隔行换色两种方法
01-19
网页设计制作,CSS实现隔行换色两种方法: 第一种方法: 以下为引用的内容：<style type=text/css>UL.myul1 LI{background-color: [removed]this.sourceIndex%2==0?’#9FB7F6′:’#B6C8F8′);}</style><ul class=myul1><li id=li1>111</li><li id=li2>222</li><li id=li2>333</li><li id=li2>444</li><li id=li2>555</li><li id=li
css如何实现隔行换色
百变鹏仔工作室
01-24 1510
上述代码中，为表格中的奇数行和偶数行分别设置了不同的背景颜色，从而实现了隔行换色的效果。选择器来实现隔行换色。该选择器用于匹配父元素中的特定子元素，是两种不同的颜色值，可以根据需要进行修改。在CSS中，可以使用。
css隔行换色的方法
michaelia530的专栏
11-28 786
CSS隔行换色的问题，其实很简单，您可以根据您的需要，采用下面的任何一种方法，当然，要适合你的编码与需求情况： 一、background背景图片 如果行高固定的话，推荐使用背景图，也推荐将行高固定！兼容一切浏览器。 二、CSS Expression 文字：color:expression(this.sourceIndex%2 ? '#ff0000':'#000000'); 背景：
css3隔行换色
qq_48445738的博客
07-14 794
今天给大家介绍个css3的选择器nth-of-type() :nth-of-type() 这个 CSS 伪类是针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置。 /* 在每组兄弟元素中选择第四个 <p> 元素 */ p:nth-of-type(4n) { color: lime; } 现在有这样的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"
CSS表格隔行变色
闪电⚡之王的博客简介
12-30 478
【代码】CSS表格隔行变色。
Jquery表格样式插件：隔行换色，移动换色，点击换色实现
然后，插件遍历表格的行，根据行的索引（奇偶性）添加相应的CSS类，实现隔行换色。点击行时，插件会根据当前行是否已选中切换CSS类，同时更新行内的复选框状态。最后，插件返回`this`，使得可以链式调用其他Jquery...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值