<!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. ORA-600 [Kcbz_check_objd_typ_1] Running a Job (Doc ID 785899.1)

    ORA-600 [Kcbz_check_objd_typ_1] Running a Job (Doc ID 785899.1) To Bottom In this Document   Symptom ...

  2. Linux下rz/sz安装及使用方法

    新搞的云服务器用SecureCRT不支持上传和下载,没有找到rz命令.记录一下如何安装rz/sz命令的方法. 一.工具说明 在SecureCRT这样的ssh登录软件里, 通过在Linux界面里输入rz ...

  3. Photoshop 基础二 快捷键

    1.取消选区:Ctrl + D 2.反选: Shift + F7 3.复位调板:窗口-工作区-复位调板位置 4.图像的缩放: Ctrl.+.- 5.用前景色填充:Ctrl + Delete 6.用背景 ...

  4. Volume is already attached by pod default/nginx-deployment-86dfb99868-szpkd. Status Running

    1.部署WordPress - mysql ,想扩容,修改deployment,结果报错: MountVolume.SetUp failed for volume "pvc-e" ...

  5. TCP/IP协议--TCP的交互数据流和成块数据流

    前边讲了TCP连接的建立和终止,分别要三次握手和四次通信.这些报文段都只包含首部,没有数据部分.    这里就讲讲数据传送的一些细节.一个TCP连接建立成功以后,就可以开始传送数据了~ 一般TCP数据 ...

  6. 通过重建清理SVN服务器无用目录，不丢失其他目录修改记录

    1.主要时有时间希望调整一些文件的目录结构,或者移除一个大量占用空间的文件节省服务器磁盘,但是又不希望调整后,对应的修改记录丢失.这时可以通过服务器目录重建实现. 2.重建后只是被排除掉的目录的修改记 ...

  7. ADO.NET分享

    看到<c#从入门到精通(第三版)>书中对ado.net里几种方法打的比方,很有意思就发一下. 1)这张图中,把数据比作水,储存了大量数据. 2)Connection对象好像进水龙头,插在水 ...

  8. Mapreduce打印调试输出

    Mapreduce打印调试内容: 一.启动JobHistoryServer mr-jobhistory-daemon.sh start historyserver [hadoop@node11 sbi ...

  9. BZOJ4614/UVA1742 Oil 计算几何

    传送门 题意:在平面直角坐标系中给出$N$条互不相交的.与$x$轴平行.且在$x$轴上方的线段,每一条线段的价值为其长度.求一条不与$x$轴平行的直线,使得与这条直线相交的线段的价值之和最大,求出这个 ...

  10. 字符串中去除多余的空格保留一个(C#)

    在C#的字符串,其中有许多空格,现要求是把多余的空格去除保留一个.原理是使用Split()方法进行分割,分割有一个选项是RemoveEmptyEntries,然后再把分割后的字符串Join起来. st ...