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. Android优化

    ListView的优化 复用convertview , 历史的view对象 减少子孩子查询的次数 viewholder 异步加载数据(把图片缓存) 条目多时分页加载数据 加载时显示进度条让用户等待 I ...

  2. 去掉SrollView、GrdiView、ListView、ViewPager等滑动到边缘的光晕效果

    当我们使用SrollView.GrdiView.ListView.ViewPager带有滑动功能的组件时,滑动到边缘时总会出现类光晕效果.这是用于提示用户已经滑动到了组件的边缘,不能再滑动了,但有时候 ...

  3. hdu2859 dp

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=2859 题意:输入一个数n,接下来是一个由n*n个字母组成的矩阵,求以左下到右上的线为轴的最 ...

  4. 2016.8.21 JavaScript 入门

    1.JavaScript的数据类型: ①undefined ②null ③boolean ④string ⑤symbol ⑥number,    object 2.在JavaScript中所有的变量和 ...

  5. Flume interceptor 使用注意事项

    1. 在使用 Regex Filtering Interceptor的时候一个属性是excludeEvents 当它的值为true 的时候,过滤掉匹配到当前正则表达式的一行 当它的值为false的时候 ...

  6. while的使用

    我在用while的时候, while(当这个对象的首个字是汉字){ 执行语句 } 我发现出现死循环的现象 其实我要再添加一个条件,就是不管是不是上述条件都成立,最终还是要结束的.

  7. Shell 编程基础之 While 练习

    一.语法 while [ condition ] # 当 condition 条件成立时,就进行循环,直到条件不成立停止 do #执行内容 done 二.练习 输入用户输入的参数,直到用户输入 &qu ...

  8. 同引擎mysql数据库转导快

    mysql数据库从一个表导入到另外一个表,数据库表引擎类型相同速度会快很多,相反,慢得离奇,5w,相同从myisam到myisam一或两分钟,从myisam到innodb要1到2个小时. [注意:最近 ...

  9. CentOS 6.6 安装Cacti

    1.最小化安装CentOS6.6,装好系统以后关闭防火墙和selinux[root@Cacti ~]#chkconfig iptables off[root@Cacti ~]#vi /etc/sysc ...

  10. NOIP欢乐模拟赛 T1 解题报告

    小澳的方阵 (matrix.cpp/c/pas) [题目描述] 小澳最近迷上了考古,他发现秦始皇的兵马俑布局十分有特点,热爱钻研的小澳打算在电脑上还原这个伟大的布局. 他努力钻研,发现秦始皇布置兵马俑 ...