html 奇偶色table

2024-10-21

html table奇偶行颜色设置 (CSS选择器)

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型.n 可以是数字.关键词或公式. 下面的例子, 设置表格的奇偶行背景颜色不同:单独设置表格的第1列背景颜色不同. <!DOCTYPE html> <html> <head> <style type="text/css"> table{ height: 200px; width:400px; border:2px solid green; } td{ bor

隔行换色table

色码表 Color code table

最近打算更新设计博客页面,需要用到CSS色码表,查了一些资料现转载此处以备以后使用,点击此处查看原文,另外还发现了几个不错的网站: color-hex HTML颜色代码色碼表色碼表英文為 Color code table,是網頁設計師在做設計時,挑選顏色常常會用到的參考表,好的設計往往需要做許多不同的顏色搭配與比較,才能呈現出最適合的網頁風格,舉凡表格的設計.網頁背景顏色.元素邊框顏色.圖層陰影效果.文字顏色...等,都可以使用色碼表來挑選所需要的顏色,通常使用顏色有三種不同的寫法,分別是使

基于jquery 全选、反选、各行换色、单击行选中事件实现代码

根据table随时添加列

var newRow = '<tr align="center" class="tdbg" id="tr'+temp[0]+'">'+ '<td nowrap="nowrap">'+ ' <input type="checkbox" name="checkbox_2" id="tcheckbox_'+temp[0]+'" value=&q

2016.1.19 DEV Express控件GirdControl使用

103.GridControl中添加Button RunDesigner,添加一列,设置对应字段FiledName,ColumnEdit选择ButtonEdit,此时默认风格像下拉框,需调整属性: 在In-placeEditor中,选择该控件,设置TextEditStyle为HideTextEditor 设置按钮上的预设图标:Buttons-Kind属性将默认的Ellipsis(省略号)设为Glyph(空白),同时将Caption设为需要显示的文字此时按钮轮廓不明显,将appearance的B

带你玩转JavaWeb开发之四 -如何用JS做登录注册页面校验

今日内容使用JQuery完成页面定时弹出广告使用JQuery完成表格的隔行换色使用JQuery完成复选框的全选效果使用JQuery完成省市联动效果使用JQuery完成下列列表左右选择使用JQuery完成表单的校验. 今日目标: 掌握JQuery的基本使用掌握JQuery的基本选择器,层次选择器会使用JQuery完成DOM的基本操作定时弹出广告定时器: setInterval setTimeout clearInterval style.display : none 隐藏 bl

jquery单选框复选框表格高亮选中

单选框: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head&g

jQuery实战读书笔记（备忘录）

选择器备忘: | :even 匹配所有索引值为偶数的元素,从 0 开始计数 :odd 匹配所有索引值为奇数的元素,从 0 开始计数实例——设置table交替行变色: <script type="text/javascript"> $(function(){ $('#main_table tr').filter(':even').css({'background':'#0ff'}).filter(':odd').css({'background':'#f00'}); //注

第七章 jQuery操作表格及其它应用

1.表格变色 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head

HTML语言语法大全

(文章转载至博客园 dodo-yufan) <! - - ... - -> 註解 <!> 跑馬燈 <marquee>...</marquee>普通捲動 <marquee behavior=slide>...</marquee>滑動 <marquee behavior=scroll>...</marquee>預設捲動 <marquee behavior=alternate>...</marque

jquery几个常用的demo

新建两个页面.一个叫做 ---- demo1.js------- 一个叫做 ----- demo1.html----- 代码分别如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title>  <link href="resource/boots

一：Bootstrap-css样式

页面大块布局: div.container 栅格系统: 一行分成 12 列 div.row div.col-md-12 div.col-xs-12 <div class="row"> <div class="col-md-4"></div> <div class="col-md-4"></div> <div class="col-md-4"></di

《锋利的JQuery》读书要点笔记4——表格表单的操作

第五章 jQuery对表单,表格的操作以及更多应用这章主要以一些具体案例讲解了jQuery对表单,表格的常用操作,以及一些常见的jQuery应用,用到的都是上几章说的东西.下面就以具体的案例来展开. 5.1 表单应用案例1:文本框获取和失去焦点时改变其样式. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tr

OpenCV2:第五章访问图像

一.行/列访问 1.单行/单列访问 Mat Mat::row(int i) const Mat Mat::col(int j) const 2.多行/多列访问 Range(start,end); Range::all(); // 表示所有行或列 Mat A; Mat B=A(Range::(5,9),Range(1,3)); //表示5-9行(不包括9),1-3列(不包括3) 二.区域访问 1.CRect //在图像的右下角定义一个ROI cv::Mat imageROI(image,cv::

一篇入门AngularJS

目录 1.AngularJS 应用 2.AngularJS 指令 3.AngularJS 表达式 4.AngularJS 模型 5.AngularJS 控制器 6.AngularJS 作用域 7.AngularJS 过滤器 8.AngularJS 服务 9.AngularJS 表格 10.AngularJS 表单 11.AngularJS API 12.AngularJS 包含 13.AngularJS 样式 13.AngularJS 动画 14.AngularJS 依赖注入 15.Angula

关于css样式加载的问题

今天我在学习jQuery的addClass操作时遇到了一个小问题,想来跟大家分享一下,避免初学者踩坑. 我的需求是制作一个表格,并让它隔行换色,在此基础上再加上鼠标悬浮变色的效果.(主要训练jQuery选择器和addClass) 但是在我真正操作后发现我的奇数行都变色了,而偶数行都没有变.具体效果如下: 原效果: 我们可以看到首行为一种颜色,奇数行无颜色,偶数行设置了背景颜色鼠标悬浮在第一行的效果: 这里可以观察到“梅西”一行变换了颜色鼠标悬浮在第二行的效果: 到了这里就发生了异常,整个表

表格变色示例中发现的问题——attr()与prop()

在练习jQuery表格变色例子过程中,发现了一下几个问题: 在IEEdge浏览器中切换选中行会出现上一个表格行背景色被吃掉的情况: 在chrome中从上向下单击行中任意单元可以选中该行,而从下往上单击虽选中了行,而前面的按钮列未显示选中状态针对以上问题,查阅了资料后,发现了原因,以及解决方法: 为tbody设置border-collapse:collapse;方可解决吃色问题在引用jQuery版本是1.6之后的,设置radio的checked属性不应使用attr()方法,应使用prop()方

Jquery-控制table的奇偶数色列

css代码 <style> .even{background:#FFF38F;} .odd{background:#FFFFEE;} .selected{background:#FF9900;} </style> jquery代码 <script type="text/javascript"> $(function(){ $("tr:odd").addClass("odd"); $("tr:even&

纯CSS3代码实现表格奇偶行异色，鼠标悬浮变色

1.首先会用到<tr></tr>元素两个伪类,nth-child()和hover. 然后需要注意的是伪类都是通过冒号引用的,不是点号,即tr:hover{} 其次,CSS代码中要注意顺序. tr:nth-child(odd){ background-color:#CFF;} tr:nth-child(even){ background-color:#699;} tr:hover{ background-color:#F0C;} 写成这样是可以正常完成所需要的功能的,但是如果你写成

jQuery实现table隔行换色和鼠标经过变色

一.隔行换色 $("tr:odd").css("background-color","#eeeeee"); $("tr:even").css("background-color","#ffffff"); 或者一行搞定: $("table tr:nth-child(odd)").css("background-color","#eeeeee

html 奇偶色table

热门专题