<!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. UnicodeDecodeError: 'ascii' codec can't decode byte 0xe5 in position 1: ordinal not in range(128)

    对于写python的人来说,这个异常一点不陌生,只要涉及到中文字符串的操作,一不小心就会出错.关于这个问题的解释,找到一篇好文,分享一下. 原文地址:https://blog.csdn.net/u01 ...

  2. 通过JSP网页连接MySQL数据库，从MySQL数据库中读出一张表并显示在JSP网页中

    1.安装所需软件 ①安装java和tomcat,建立JSP网页最基础的软件②安装MySQL数据库(下载地址:https://www.mysql.com/)③安装Navicat Premium来查看数据 ...

  3. Cesium学习1：如何在本机的Apache tomcat9.0.8服务器中打开cesium的index.html页面

    Cesium的官方网站:https://cesiumjs.org/ 点击这个按钮来获取最新的Cesium:下载Cesium. 下载完成之后将zip文件解压到你选择的新目录,解压之后文件目录类似于下图. ...

  4. centos7搭建kibana

    上一节elasticsearch搭建地址 https://www.cnblogs.com/mutong1228/p/10181544.html 学习了上一篇的搭建,理解了命令的含义之后,本节就非常方便 ...

  5. FreeRTOS队列

    简单来讲队列是任务间通信的方式,队列本身是可以存储消息的,队列的消息可以由一个或者多个任务写入,也可以由一个或者多个任务读出,总之消息队列是任务间通信方式:

  6. Android学习之基础知识五—编写聊天界面

    第一步:在app/build.grandle添加RecyclerView依赖库 第二步:在activity_main.xml文件中编写主界面:聊天.发送框.发送按钮三个部分 第三步:编写Message ...

  7. rook 排错记录 + Orphaned pod found kube-controller-manager的日志输出

    1.查看rook-agent(重要)和mysql-wordpress 的日志,如下: MountVolume.SetUp failed for volume "pvc-f002e1fe-46 ...

  8. React-UI组件和容器组件

    UI组件负责页面的渲染,又叫傻瓜组件. 容器组件负责逻辑,又叫聪明组件. 当一个组件只有render函数的时候,就可以用无状态组件的形式来定义这个组件.无状态组件怎么定义呢?其实就是一个函数,接受pr ...

  9. (原创)odoo11配置邮件功能的那些事儿

    要点总结: 1.odoo的邮件系统功能设计目的,主要是解决业务相关的邮件沟通问题,切记不要将odoo当作邮件系统或者邮件客户端使用 2.odoo收件,默认需要邮件系统支持catch-all功能,但可惜 ...

  10. [HAOI2017]供给侧改革[离线、trie]

    题意 题目链接 分析 由于数据随机所以 LCP 不会很长,维护每个位置后 40 个字符构成的01串. 将询问离线维护,以当前右端点为 R 的每个长度的 LCP 的第一个出现位置 f(这个信息显然是单调 ...