jquery 设置表格奇偶数的颜色和行被选中的颜色样式jquery 设置表格奇偶数的颜色和行被选中的颜色样式
query 代码
$(funtion(){
//设置偶数行和奇数行
$("tbody>tr:odd").addClass("ou"); //为奇数行设置样式(添加样式类)
$("tbody>tr:even").addClass("dan"); // 为偶数行设置样式类
$("tbody>tr:has(:checked)").addClass("ed"); //判断行是否被选中(返回布尔类型)添加样式类 // has(:checked)") 返回一个bool值 true/false
// 搜索被选中 has(:checked)
$('tbody>tr').click(function(){
var hased = $(this).hasClass('ed');
if(hased)
{
$(this).removeClass("ed").find(":input").attr("checked",false);
}
else
{
$(this).addClass("ed").find(":input").attr("checked",true);
}
});
// 遍历指定触发函数
})
css 代码:
<style type="text/css">
table {border:0;border-collapse:collapse;}
td {font:normal 12px/17px Arial;padding:2px;width:100px;}
th {font:bold 12px/17px
Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
.dan {background:#FC0}
.ou {background:#FFF}
.ed {background:#669;color:#fff;}
</style>
HTML 代码
<body>
<table>
<thead>
<tr><th> </th><th>标题</th><th>时间</th><th>地点</th></tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="choice" value=""></td>
<td>php100视屏1</td><td>2011</td><td>上海</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value=""></td>
<td>php100视屏2</td><td>2012</td><td>杭州</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value=""></td>
<td>php100视屏3</td><td>2011</td><td>济南</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value=""></td>
<td>php100视屏4</td><td>2012</td><td>北京</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value=""></td>
<td>php100视屏5</td><td>2011</td><td>武汉</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value=""></td>
<td>php100视屏6</td><td>2012</td><td>福州</td>
</tr>
</tbody>
</table>
</body>
jquery 设置表格奇偶数的颜色和行被选中的颜色样式jquery 设置表格奇偶数的颜色和行被选中的颜色样式的更多相关文章
- echarts折线图柱状图的坐标轴的颜色及样式的设置
基本用法请查看echarts官网. 一.图例legend的设置. 1.字体和颜色的设置 textStyle:{ fontSize:15, color:'#fff' } 2.样式的设置 legend: ...
- 【POI xlsx】使用POI对xlsx的单元格样式进行设置 / 使用POI对xlsx的字体进行设置
涉及到的样式都在代码中有说明: package com.it.poiTest; import java.io.FileNotFoundException; import java.io.FileOut ...
- HTML5学习笔记<三>: HTML5样式, 连接和表格
HTML样式 1, 标签: <style>: 样式定义 <link>: 资源引用 2. 属性: rel="stylesheet": 外部样式表 type=& ...
- Html中行内样式的设置
Html中行内样式的设置.. <html> <head> <title>显示的页面选项卡标题</title> <style type=" ...
- Html中<a>标签的样式的设置
html中<a>标签的样式的设置.. ------------------------ <html> <head> <title>这是网页选项卡的名称& ...
- [HTML/HTML5]2 CSS样式表设置
2.1 在HTML文件中设置样式表 当前HTML"规则"指出:HTML仅用于标识页面的内容,应该使用样式表来定义内容的呈现样式.这不仅使Web页面对于所有用户(无论采用什么浏览器 ...
- jquery mobile扁平化设计样式--Jquery mobile Flat UI介绍
jquery mobile扁平化设计样式--Jquery mobile Flat UI介绍 这几天开发的web app使用了jquery mobile,jquery mobile自带的样式比较适合做企 ...
- jquery 获取一组元素的选中项 - 函数、jquery获取复选框值、jquery获取单选按钮值
做表单提交时,如果现在还在用form提交,用户体验很差,所以一般使用ajax提交. 其中需要获取每个表单输入元素的值,获取的时候像文本框这些还好说,Jquery提供了 .val() 方法,获取很方便, ...
- 使用mysql 命令行,增加 ,删除 字段 并 设置默认值 及 非空
使用mysql 命令行,增加 ,删除 字段 并 设置默认值 及 非空 添加 alter table table_name add field_name field_type; 添加,并设置默认值,及非 ...
随机推荐
- 廖雪峰js教程笔记9 json
JSON是JavaScript Object Notation的缩写,它是一种数据交换格式. 在JSON出现之前,大家一直用XML来传递数据.因为XML是一种纯文本格式,所以它适合在网络上交换数据.X ...
- hdu2191 多重背包
题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=2191 多重背包:有N种物品和一个容量为V的背包.第i种物品最多有n[i]件可用,每件费用是 ...
- TCP/IP详解2 学习笔记---mbuf
1,mbuf就是存储要发送数据的memery buf,类似于skb_buf.不过结构比较简单. /* header at beginning of each mbuf: */ 这个结构用来描述mbuf ...
- DIjkstra(反向边) POJ 3268 Silver Cow Party || POJ 1511 Invitation Cards
题目传送门 1 2 题意:有向图,所有点先走到x点,在从x点返回,问其中最大的某点最短路程 分析:对图正反都跑一次最短路,开两个数组记录x到其余点的距离,这样就能求出来的最短路以及回去的最短路. PO ...
- Python基础9- 字典
#coding=utf8#字典由键和对应的值组成(键值对)--哈希表,字典元素也可以为空 dict1 = {'name':'kaly','age':20,'sex':'male'}dict2 = {} ...
- 设置某个ip对mysql服务器有权限,以及mysql定时备份
CREATE USER 'new_username'@'211.68.%.%' IDENTIFIED BY 'password_for_new_username'; GRANT ALL ON * TO ...
- 【原】iOS学习42即时通信之XMPP(1)
1. 即时通信 1> 概述 即时通讯(Instant Messaging)是目前Internet上最为流行的通讯方式,各种各样的即时通讯软件也层出不穷,服务提供商也提供了越来越丰富的通讯服务功能 ...
- BZOJ1931 : [Shoi2007]Permutation 有序的计数
枚举LCP以及下一位变小成什么,统计出剩下的有几个可以在原位置. 然后枚举剩下的至少有几个在原位置,容斥计算答案. 时间复杂度$O(n^3)$. #include<cstdio> type ...
- ACM Minimum Inversion Number 解题报告 -线段树
C - Minimum Inversion Number Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d &a ...
- 【POJ】1284 Primitive Roots
http://poj.org/problem?id=1284 题意:求一个素数p的原根个数.(p<=65535) #include <cstdio> #include <cst ...