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 设置表格奇偶数的颜色和行被选中的颜色样式的更多相关文章

  1. echarts折线图柱状图的坐标轴的颜色及样式的设置

    基本用法请查看echarts官网. 一.图例legend的设置. 1.字体和颜色的设置 textStyle:{ fontSize:15, color:'#fff' } 2.样式的设置 legend: ...

  2. 【POI xlsx】使用POI对xlsx的单元格样式进行设置 / 使用POI对xlsx的字体进行设置

    涉及到的样式都在代码中有说明: package com.it.poiTest; import java.io.FileNotFoundException; import java.io.FileOut ...

  3. HTML5学习笔记<三>: HTML5样式, 连接和表格

    HTML样式 1, 标签: <style>: 样式定义 <link>: 资源引用 2. 属性: rel="stylesheet": 外部样式表 type=& ...

  4. Html中行内样式的设置

    Html中行内样式的设置.. <html> <head> <title>显示的页面选项卡标题</title> <style type=" ...

  5. Html中<a>标签的样式的设置

    html中<a>标签的样式的设置.. ------------------------ <html> <head> <title>这是网页选项卡的名称& ...

  6. [HTML/HTML5]2 CSS样式表设置

    2.1  在HTML文件中设置样式表 当前HTML"规则"指出:HTML仅用于标识页面的内容,应该使用样式表来定义内容的呈现样式.这不仅使Web页面对于所有用户(无论采用什么浏览器 ...

  7. jquery mobile扁平化设计样式--Jquery mobile Flat UI介绍

    jquery mobile扁平化设计样式--Jquery mobile Flat UI介绍 这几天开发的web app使用了jquery mobile,jquery mobile自带的样式比较适合做企 ...

  8. jquery 获取一组元素的选中项 - 函数、jquery获取复选框值、jquery获取单选按钮值

    做表单提交时,如果现在还在用form提交,用户体验很差,所以一般使用ajax提交. 其中需要获取每个表单输入元素的值,获取的时候像文本框这些还好说,Jquery提供了 .val() 方法,获取很方便, ...

  9. 使用mysql 命令行，增加 ，删除 字段 并 设置默认值 及 非空

    使用mysql 命令行,增加 ,删除 字段 并 设置默认值 及 非空 添加 alter table table_name add field_name field_type; 添加,并设置默认值,及非 ...

随机推荐

  1. 移动端网页 -- 安卓与IOS兼容

    1.在a链接长按时,ios系统会识别并复制a链接中的href值,而安卓不会,只会选择复制文字 关于长按复制其他区域内容:pc端可以实现,在移动端目前还没有找到解决方案,很多都是基于flash的 2.i ...

  2. BeanShell用法汇总（部分摘抄至网络）【转】

    说明:本文部分资料摘抄至 来源: http://www.cnblogs.com/puresoul/p/4915350.html 来源: http://www.cnblogs.com/puresoul/ ...

  3. 实现窗体随着鼠标移动(控件)--《用delphi开发共享软件》-15.1任务管理器

    private //窗体移动: OldPos,NewPos:TPoint; bMove:Boolean; procedure TForm1.FormMouseDown(Sender: TObject; ...

  4. sqlserver数据库 去除字段中空格，换行符，回车符(使用replace语句)

    SQL中可以使用Replace函数来对某个字段里的某些字符进行替换操作,语法如下: 语法 REPLACE ( original-string, search-string, replace-strin ...

  5. SOAPUI测试步骤之断言测试(Assertion TestStep)

    什么是没有办法验证结果的测试?soapUI提供了两种方法来测试断言:断言TestSteps现在断言一步步测试(PRO版本).The Assertion TestStep,扩展了断言处理和管理的想法.此 ...

  6. Button 设置适应不同版本 旋转以后大小相应的改变

    很多时候对于不同的版本,随设备的旋转以后,相应的Button的大小如果不做相应的改变,这很影响视图的美观和布局:下面是小编的个人看法  UIButton *button = [[UIBtton all ...

  7. BZOJ 1045 题解

    1045: [HAOI2008] 糖果传递 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 3502  Solved: 1623[Submit][Sta ...

  8. dynamic 是什么

    dynamic是c# 4.0新增的类型,可以修饰类,对象,属性,索引器,方法返回值等. class ExampleClass { // A dynamic field. static dynamic ...

  9. MongoDB介绍及安装

    一.介绍: 1.NoSql(非关系型的数据库)成了一个极其热门的新领域,非关系数据库产品的发展非常迅速.MongoDB是NoSql的其中一种较为热门的非关系型数据库.查阅很多资料.其他博客和网站,借着 ...

  10. 四种读写方案IO流 (JAVA)

    File类用于访问文件或目录的属性 流:指一连串流动的字符,是以先进先出的方式发送信息的通道.程序和数据源之间是通过流联系起来的. 第一套:字节流读取写入方案 FileInputStream :字节流 ...