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>

时间: 2024-08-08 16:34:03

jquery 设置表格奇偶数的颜色和行被选中的颜色样式jquery 设置表格奇偶数的颜色和行被选中的颜色样式的相关文章

Web前端技术:CSS部分初识--行内样式、内嵌样式、外部样式,CSS的优先级,CSS的选择器,各种CSS样式(文本与文字、颜色的表示、背景的设置、超链接、列表、表格、图片)

一.CSS样式 1.行内样式:直接写在body的内部标签里,如下就是行内样式 2.内嵌样式:写在head的style标签内,如下就是内嵌样式 3.外部样式:css样式单独写在一个.css文件里,使用时,在HTML的head内用link标签引用即可 二.CSS的优先级 三.CSS的选择器 选择器是一种选择方式.选中你想要的元素的方法,称之为“选择器”  1.全局选择器:*  2.标签选择器:p.span.a.h1~h6.ul.ol  3.类选择器:.one  4.id选择器:#left  5.后代

边框样式的设置

<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>边框样式的设置</title> <style> div{ width:400px; height:400px; } .div1{ border-width:10px;/*边框的宽度*/ border-style:solid;/*边框的样式*/ bo

关于记录任意选择行删除或者其他的操作(jquery操作)-只是简单的一个实现

---恢复内容开始--- 写这个完全是因为最近的项目有关于类似电商网站,好多地方都用到了,删除的操作(仅仅只是一个记录),第一次尝试在博客中记录,嘿嘿!写的不好的地方,多包涵...... 1.关于表格中checkbox 选中之后删除 html: <h1>表格选中-删除</h1> <table id = "test_table"> <tr><td><input type="checkbox" name=

jQuery easyUI id选择器 类选择器 标签选择器 属性选择器 及DOM对象和jQuery相互之间的转换

首先导入js文件 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"

下拉列表样式如何设置?

今天工作中遇到要求设置下拉列表的样式,在此分享下设置方法: 需要小三角图片一张: 文档结构如下: 样式代码如下: 需要加js来完成下拉效果: 来看看最终效果吧:如果你有更好的方法,期待你的分享-- 下拉列表样式如何设置?,布布扣,bubuko.com

Fibonacci数列是这样定义的: F[0] = 0 F[1] = 1 for each i ≥ 2: F[i] = F[i-1] + F[i-2] 因此,Fibonacci数列就形如:0, 1, 1, 2, 3, 5, 8, 13, ...,在Fibonacci数列中的数我们称为Fibonacci数。给你一个N,你想让其变为一个Fibonacci数,每一步你可以把当前数字X变为X-1或者X+1

Fibonacci数列是这样定义的:F[0] = 0F[1] = 1for each i ≥ 2: F[i] = F[i-1] + F[i-2]因此,Fibonacci数列就形如:0, 1, 1, 2, 3, 5, 8, 13, ...,在Fibonacci数列中的数我们称为Fibonacci数.给你一个N,你想让其变为一个Fibonacci数,每一步你可以把当前数字X变为X-1或者X+1,现在给你一个数N求最少需要多少步可以变为Fibonacci数. 输入描述: 输入为一个正整数N(1 ≤ N

js获取css的各种样式并且设置他们

js原生获取css样式,并且设置,看似简单,其实并不简单,我们平时用的ele.style.样式,只能获取内嵌的样式,但是我们写的样式基本都在style属性里面; 这里我们就需要: 下面这个代码主要是设置为了兼容IE这孙子; function getStyle(element, attr) { if (element.currentStyle) { return element.currentStyle[attr];//傻逼IE的获取元素的方法 } else { return getCompute

类的继承和多态性-编写Java应用程序,定义Animal类,此类中有动物的属性:名称 name,腿的数量legs,统计动物的数量 count;方法:设置动物腿数量的方法 void setLegs(),获得腿数量的方法 getLegs(),设置动物名称的方法 setKind(),获得动物名称的方法 getKind(),获得动物数量的方法 getCount()。定义Fish类,是Animal类的子类,

编写Java应用程序,定义Animal类,此类中有动物的属性:名称 name,腿的数量legs,统计动物的数量 count;方法:设置动物腿数量的方法 void setLegs(),获得腿数量的方法 getLegs(),设置动物名称的方法 setKind(),获得动物名称的方法 getKind(),获得动物数量的方法 getCount().定义Fish类,是Animal类的子类,统计鱼的数量 count,获得鱼数量的方法 getCount().定义Tiger类,是Animal类的子类,统计老虎的

htm中样式的设置

1.内联式 内联式css样式表就是把css代码直接写在现有的HTML标签中,如下面代码: <p style="color:red">这里文字是红色.</p> 注意要写在元素的开始标签里,下面这种写法是错误的: <p>这里文字是红色.</p style="color:red"> 并且css样式代码要写在style=""双引号中,如果有多条css样式代码设置可以写在一起,中间用分号隔开.如下代码: &l