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. ASP.NET MVC5 网站开发实践(一) - 项目框架（转）

    前几天算是开题了,关于怎么做自己想了很多,但毕竟没做过项目既不知道这些想法有无必要,也不知道能不能实现,不过邓爷爷说过“摸着石头过河”吧.这段时间看了一些博主的文章收获很大,特别是@kencery,依 ...

  2. JS操作select下拉框动态变动(创建/删除/获取)

    1.动态创建select function createSelect(){ var mySelect = document.createElement_x("select"); m ...

  3. CSS3-animation，表格表单的格式化

    animation 1.与transition一样,animation在IE9之前都不支持,不仅如此,还需要大量的供应商前缀 2.定义关键帧:@内容中需要大量的前缀 @keyframes  fadeI ...

  4. 如何处理js的跨域问题

    在bill.mail.10086.cn域内访问smsrebuild1.mail.10086.cn下的接口出现“阻止跨域源请求” 例如: URL 说明 是否允许通信 http://www.a.com/a ...

  5. C#性能测试方法

    用 System.Diagnostics.Stopwatch watch = new System.Diagnostics.Stopwatch(); watch.Start(); for (int i ...

  6. poj2386（简单dfs）

    就是求图中有多少个水洼.对图进行dfs遍历,并把是水洼的地方全部标记.然后从下一个是水哇的地方再进行dfs. #include <cstdio> #include <iostream ...

  7. hadoop yarn running beyond physical memory used

    老是报物理内存越界,kill container,然后把yarn.scheduler.minimum-allocation-mb设成2048就好了 跟这个yarn.nodemanager.pmem-c ...

  8. Gulp探究折腾之路(I)2

    文/晚晴幽草(简书作者)原文链接:http://www.jianshu.com/p/9768a4dc7cf7著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 前言: gulp是前端开发过 ...

  9. UVA 11039 - Building designing(DP)

    题目链接 本质上是DP,但是俩变量就搞定了. #include <cstdio> #include <cstring> #include <algorithm> u ...

  10. C#操作XML文档---基础

    增查改删代码如下 public void CreateXML() { XmlDocument xml = new XmlDocument(); xml.AppendChild(xml.CreateXm ...