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; 添加,并设置默认值,及非 ...
随机推荐
- PHP入门 - - 05-->编写HTML页面的常用标签
一.文字版面的编辑 1.格式标签 格式标签用于定义网页中文本的布局.缩进.位置.换行.列表等 <br> 换行 <p> ...
- 泛型容器单元(Generics.Collections)[2]: TQueue<T> 队列列表
TQueue 和 TStack, 一个是队列列表, 一个是堆栈列表; 一个是先进先出, 一个是先进后出. TQueue 主要有三个方法.一个属性:Enqueue(入列).Dequeue(出列).Pee ...
- 使用Spring发送邮件
http://www.oschina.net/code/snippet_253813_36503
- http://m.blog.csdn.net/article/details?id=8237698
http://m.blog.csdn.net/article/details?id=8237698
- PHP、Java输出json格式数据
PHP 输出json. $result = mysql_query($sql); //查询结果 $users=array(); $i=0; while($row=mysql_fetch_array ...
- 【转载】Android内存泄露
相信一步步走过来的Android从业者,每个人都会遇到OOM的情况.如何避免和防范OOM的出现,对于每一个程序员来说确实是一门必不可少的能力.今天我们就谈谈在Android平台下内存的管理之道,开始今 ...
- Java 语言细节
1. if(x = 1) 为什么java不会因为这样的笔误代码犯错? // meant x == 1 因为在C++中,整数0代表布尔值false,非0值相当于布尔值true,在Java中int与布 ...
- Fetch from Upstream 变灰失效
Team——>Remote——>Configure Fetch from Upstream… Team——>Remote——>Configure Push to Upstre ...
- POJ3461Oulipo 题解
题目大意: 求字符串A在字符串B中出现的次数. 思路: KMP板题,用Hash也可水过~要学习KMP可参考http://blog.csdn.net/u011564456/article/details ...
- 20145308刘昊阳 《Java程序设计》实验一 Java开发环境的熟悉 实验报告
20145308刘昊阳 <Java程序设计>实验一报告 实验名称 Java开发环境的熟悉 实验内容 使用JDK编译.运行简单的Java程序 2.使用Eclipse 编辑.编译.运行.调试J ...