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. vs 中怎么用c改变部分字体颜色

    // test.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <windows.h> #include< ...

  2. iOS10 UI教程基改变视图的外观与视图的可见性

    iOS10 UI教程基改变视图的外观与视图的可见性 视图是应用程序的界面,是用户在屏幕上看到的对象.用户可以通过触摸视图上的对象与应用程序进行交互,所以视图界面的优劣会直接影响到了客户体验的好坏.和视 ...

  3. 20145223《Java程序程序设计》第1周学习总结

    20145223 <Java程序设计>第1周学习总结 教材学习内容总结 1.JDK.JRE以及JVM的区别 JDK:撰写java程序语言的时候需要用到的编译工具 JRE:java执行环境 ...

  4. SlidesJS的使用

    项目中对slideshow要求要有触屏滑动换图功能,就想到了SlidesJS这个Jquery插件 例排,先把静态html写好 <div id="cm_slides"> ...

  5. server返回arraylist时，juqery在客户端的处理

    首先,要添加命名控件如下: using System.Web.Services;   server端的方法 [WebMethod()] public static ArrayList GetAuthB ...

  6. Experimental Educational Round: VolBIT Formulas Blitz

    cf的一次数学场... 递推 C 题意:长度<=n的数只含有7或8的个数 分析:每一位都有2种可能,累加不同长度的方案数就是总方案数 组合 G 题意:将5个苹果和3个梨放进n个不同的盒子里的方案 ...

  7. mysql建表建索引

    建表: CREATE TABLE `sj_projects` ( `id` int(11) NOT NULL AUTO_INCREMENT, `title` varchar(255) NOT NULL ...

  8. <构建之法>第十三章到十七章有感以及这个项目读后感

    <构建之法>第十三章到十七章有感 第13章:软件测试方法有哪些? 主要讲了软件测试方法:要说有什么问题就是哪种效率最高? 第14章:质量保障 软件的质量指标是什么?怎么样能够提升软件的质量 ...

  9. BZOJ 1001 题解

    1001: [BeiJing2006]狼抓兔子 Time Limit: 15 Sec  Memory Limit: 162 MBSubmit: 18876  Solved: 4649[Submit][ ...

  10. 【BZOJ】1975: [Sdoi2010]魔法猪学院

    题意 \(n(2 \le n \le 5000)\)个点,找尽量多的不同\(1\)到\(n\)的路径,每一次的花费就是路径的全值和,要求在费用不超过\(E\)的情况下路径最多. 分析 裸的最段路. 题 ...