编程 Javascript

jquery实现控制表格行高亮实例

Posted in Javascript onJune 05, 2013

[css]

<style> 
.height{ 
  background:#666666;   /*背景颜色为灰色*/ 
} 
tr{ 
    cursor: pointer;    /*手形*/   
} 
</style> 
<style>
.height{
  background:#666666;   /*背景颜色为灰色*/
}
tr{
 cursor: pointer;    /*手形*/ 
}
</style>

[html]

<body> 
<table border="1" width="40%"> 
   <tr><th></th><th align="left">姓名</th><th align="left">性别</th><th align="left">居住地</th></tr> 
   <tr> 
        <td><input type="radio" name="radio" /></td><td>张三</td><td>男</td><td>北京</td> 
   </tr> 
    <tr> 
        <td><input type="radio" name="radio" /></td><td>李四</td><td>男</td><td>上海</td> 
   </tr> 
    <tr> 
        <td><input type="radio" name="radio" /></td><td>王五</td><td>女</td><td>深圳</td> 
   </tr> 
    <tr> 
        <td><input type="radio" name="radio" /></td><td>赵六</td><td>女</td><td>北京</td> 
   </tr> 
    <tr> 
        <td><input type="radio" name="radio" /></td><td>孙七</td><td>男</td><td>上海</td> 
   </tr> 
</table> 
</body> 
<body>
<table border="1" width="40%">
   <tr><th></th><th align="left">姓名</th><th align="left">性别</th><th align="left">居住地</th></tr>
   <tr>
        <td><input type="radio" name="radio" /></td><td>张三</td><td>男</td><td>北京</td>
   </tr>
    <tr>
        <td><input type="radio" name="radio" /></td><td>李四</td><td>男</td><td>上海</td>
   </tr>
    <tr>
        <td><input type="radio" name="radio" /></td><td>王五</td><td>女</td><td>深圳</td>
   </tr>
    <tr>
        <td><input type="radio" name="radio" /></td><td>赵六</td><td>女</td><td>北京</td>
   </tr>
    <tr>
        <td><input type="radio" name="radio" /></td><td>孙七</td><td>男</td><td>上海</td>
   </tr>
</table>
</body>

jquery

[javascript]

 plaincopyprint?$(document).ready(function(){ 
       //第一种写法: $("tr:gt(0)")   第一行标题不起作用   
       $("tr:gt(0)").click(function(){ 
              $(this).addClass("height").siblings().removeClass("height").end().find(":radio").attr("checked",true); 
       })        //第二种写法：$("tr:not(:first)")  
       /*$("tr:not(:first)").click(function(){
              $(this).addClass("height").siblings().removeClass("height").end().find(":radio").attr("checked",true);
       })*/ 
}) 

$(document).ready(function(){
    //第一种写法: $("tr:gt(0)")   第一行标题不起作用
    $("tr:gt(0)").click(function(){
     $(this).addClass("height").siblings().removeClass("height").end().find(":radio").attr("checked",true);
    })
    //第二种写法：$("tr:not(:first)")
    /*$("tr:not(:first)").click(function(){
     $(this).addClass("height").siblings().removeClass("height").end().find(":radio").attr("checked",true);
    })*/
})

jquery实现控制表格行高亮实例

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

基于jquery的动态创建表格的插件

Apr 05 Javascript

jQuery DOM删除节点操作指南

Mar 03 Javascript

jQuery实现鼠标划过展示大图的方法

Mar 09 Javascript

每天一篇javascript学习小结（RegExp对象）

Nov 17 Javascript

jQuery实现图片上传和裁剪插件Croppie

Nov 29 Javascript

Jquery实现$.fn.extend和$.extend函数

Apr 14 Javascript

Js查找字符串中出现次数最多的字符及个数实例解析

Sep 05 Javascript

JavaScript实现封闭区域布尔运算的示例代码

Jun 25 Javascript

详解webpack模块加载器兼打包工具

Sep 11 Javascript

详解create-react-app 2.0版本如何启用装饰器语法

Oct 23 Javascript

Node.js实现简单管理系统

Sep 23 Javascript

vue3.0中使用postcss-pxtorem的具体方法

Nov 20 Javascript

javascript:;与javascript:void(0)使用介绍

Jun 05 #Javascript

jquery插件开发注意事项小结

Jun 04 #Javascript

jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码

Jun 04 #Javascript

js调用AJAX时Get和post的乱码解决方法

Jun 04 #Javascript

jQuery调用AJAX时Get和post公用的乱码解决方法实例说明

Jun 04 #Javascript

左侧是表头的JS表格控件(自写,网上没有的)

Jun 04 #Javascript

js判断undefined变量类型使用typeof

Jun 03 #Javascript

You might like

php 不同编码下的字符串长度区分

2009/09/26 PHP

php mysql PDO 查询操作的实例详解

2017/09/23 PHP

gearman管理工具GearmanManager的安装与php使用方法示例

2020/02/27 PHP

基于json的jquery地区联动效果代码

2011/07/06 Javascript

js算法中的排序、数组去重详细概述

2013/10/14 Javascript

JavaScript基础篇（3)之Object、Function等引用类型

2015/11/30 Javascript

JS跨域解决方案之使用CORS实现跨域

2016/04/14 Javascript

深入理解JavaScript中为什么string可以拥有方法

2016/05/24 Javascript

AngularJS实现DOM元素的显示与隐藏功能

2016/11/22 Javascript

jQuery实现6位数字密码输入框

2016/12/29 Javascript

JavaScript实现的选择排序算法实例分析

2017/04/14 Javascript

微信小程序实例开发总结

2017/04/26 Javascript

详解Vue2 SSR 缓存 Api 数据

2017/11/20 Javascript

解决vue2中使用axios http请求出现的问题

2018/03/05 Javascript

vue组件中的数据传递方法

2018/05/14 Javascript

详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件

2018/08/02 Javascript

JS打印彩色菱形的实例代码

2018/08/15 Javascript

nodejs实现用户登录路由功能

2019/05/22 NodeJs

node.JS路径解析之PATH模块使用方法详解

2020/02/06 Javascript

用javascript实现倒计时效果

2021/02/09 Javascript

python机器学习之决策树分类详解

2017/12/20 Python

Pandas 数据处理,数据清洗详解

2018/07/10 Python

python使用Matplotlib画饼图

2018/09/25 Python

Python 访问限制 private public的详细介绍

2018/10/16 Python

python 实现调用子文件下的模块方法

2018/12/07 Python

python应用文件读取与登录注册功能

2019/09/23 Python

关于python pycharm中输出的内容不全的解决办法

2020/01/10 Python

使用数据结构给女朋友写个Html5走迷宫游戏

2019/11/26 HTML / CSS

eBay美国官网：eBay.com

2020/10/24 全球购物

行政经理岗位职责

2013/11/09 职场文书

副总经理工作职责

2013/11/28 职场文书

办理收楼委托书范本

2014/10/09 职场文书

放假通知怎么写

2015/08/18 职场文书

初中数学教学反思范文

2016/02/17 职场文书

导游词之南京中山陵

2019/11/27 职场文书

SQL写法--行行比较

2021/08/23 SQL Server