<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="utf-8">
 <title></title>
 <style>

    table{
   border:1px solid #000;
   width: 400px;
   text-align: center;
   border-collapse: collapse;
  }
  thead tr{
   border: 1px solid #000;
  }
  .selected{
   background:red;
  }
 </style>
</head>
<body>
  <table>
  <thead>
    <tr>
    <th></th>
    <th>姓名</th>
    <th>性别</th>
    <th>暂住地</th>
   </tr>
  </thead>
  <tbody>
    <tr><td><input id="d1" type="radio"/></td><td>张山1</td><td>男</td><td>浙江宁波</td></tr>
    <tr><td><input id="d2" type="radio"/></td><td>张山2</td><td>男</td><td>浙江宁波</td></tr>
    <tr><td><input id="d3" type="radio"/></td><td>张山3</td><td>男</td><td>浙江宁波</td></tr>
    <tr><td><input id="d4" type="radio"/></td><td>张山4</td><td>男</td><td>浙江宁波</td></tr>
    <tr><td><input id="d5" type="radio"/></td><td>张山5</td><td>男</td><td>浙江宁波</td></tr>
    <tr><td><input id="d6" type="radio"/></td><td>张山6</td><td>男</td><td>浙江宁波</td></tr>
  </tbody>
 </table>
</body>
<script src="js/jquery-1.11.3.js"></script>
<script>
 //jquery有一些弊病，checked这样的是没有属性值的，不能用attr("checked",true)
 $(function(){
  $('tbody>tr').click(function(){
    var $thisonly=$(this);
    if($thisonly.find(':radio')[0].checked){
     $thisonly.removeClass('selected');
     $thisonly.find(':radio')[0].checked=false;
    }else{
     $thisonly.addClass('selected').siblings().removeClass('selected');
     $thisonly.find(':radio')[0].checked=true;
     $('table :radio:checked').parent().parent().addClass('selected');
    }
   }
  )
 })
</script>
</html>

Jquery 组 radio控与tr变色的更多相关文章

  1. Jquery 操作Html 控件 CheckBox、Radio、Select 控件 【转】http://www.cnblogs.com/lxblog/archive/2013/01/09/2853056.html

    Jquery 操作Html 控件 CheckBox.Radio.Select 控件   在使用 Javascript 编写前台脚本的时候,经常会操作 Html 控件,比如 checkbox.radio ...

  2. Jquery 操作Html 控件 CheckBox、Radio、Select 控件

    在使用 Javascript 编写前台脚本的时候,经常会操作 Html 控件,比如 checkbox.radio.select,用 Jquery 库操作其他会方便很多,下面用Jq对这些控件的操作进行一 ...

  3. Jquery Mobile下设置radio控件选中

    问题: .html文件头部引入了: <script src="js/jquery.js"></script> <script src="js ...

  4. jquery select radio

    Query获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...});   //为S ...

  5. Jquery获取服务器端控件的三种方式

    一 Jquery获得服务器控件值的方法由于ASP.NET网页运行后,服务器控件会随机生成客户端id,jquery获取时候不太好操作,google了下,总结有以下3种方法: 服务器控件代码:<as ...

  6. jquery控制radio选中

    好久没写jquery了,昨天下午写一个效果,结果倒腾了半天还是没有解决,好在今天早上在网上询问到解决方法了,现在果断记录下. 要实现的效果就是交易方式选择时不同的交易方式下默认选中第一个选项. 如下: ...

  7. Jquery常用radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关设置

    获取一组radio被选中项的值:var item = $('input[name=items][checked]').val(); 获取select被选中项的文本:var item = $(" ...

  8. JQuery判断radio是否选中，获取选中值

    本文摘自:http://www.cnblogs.com/xcj1989/archive/2011/06/29/JQUERY_RADIO.html   /*----------------------- ...

  9. 基于jQuery 常用WEB控件收集

    Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. Horizontal accordion: jQuery jQuery-Horizonta ...

随机推荐

  1. Caused by: java.lang.IllegalStateException: commit already called

    出现的情况,当FragmentTransaction是全局变量时,fragment智能调用一次commint: 异常的意思:commint已经被调用过了. 所以不要重复调用它就好了.

  2. Javascript 对象复制

    如果对象只是一个数据集,可采用json化再反json化的方式克隆一个对象,这个过程会丢失对象的方法.效率比较低. 可以采用如下递归的方式复制一个对象. function clone(target) { ...

  3. day85

    频率校验 源码分析 声明:基于rest_framework的频率校验 1.首先我们进入到APIView下的dispatch,因为由此方法开始分发的 2.可以看到dispatch方法下有一个initia ...

  4. python中#!/usr/bin/python与#!/usr/bin/env python的区别

    目的是在运行python脚本的时候告诉操作系统我们要用python解释器去运行py脚本 所以我们在第一句往往会写如下两句中的其中一句: #!/usr/bin/python 或 >#!/usr/b ...

  5. Hive 创建表

    创建表的三种方式: 方式一:新建表结构 CREATE TABLE emp( empno int, ename string ) ROW FORMAT DELIMITED FIELDS TERMINAT ...

  6. Unexpected error from external database driver (1)

    当尝试把Excel导入SQL时,发生此异常: Unexpected error from external database driver (1). 在网上查找到一个解决方法,网址http://dat ...

  7. angularjs的ng-change事件演示

    今天练习angularjs的ng-change事件. 比如用户作出选择时,系统所指定的选项中,没有用户合适的选项.此时我们可以让用户填写. 刚开始文本框是隐藏的.当用户选择了checkbox之后才会显 ...

  8. vue 动态加载组建

    <component :is="comp1"></component> data () { return { comp1:'', } } require.e ...

  9. zookeepeer集群搭建

    一.预备工作 1.zookeepeer需要安装JDK,至于版本,大家可以去官网查询一下.这里我安装的是JDK8. 2.需要开放zookeepeer用到的端口,默认端口2181.2888.3888,至于 ...

  10. POJ1845

    这还是一道综合了许多数论的知识点的,做完也涨了不少姿势 但还是因为约数和公式这个鬼东西去找了度娘 题意很简单,就是求\(A^B\)的约数之和\(mod\ 9901\). 但是这种题意越是简单的题目越是 ...