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);
    })*/
})
Javascript 相关文章推荐
很多人都是用下面的js刷新站IP和PV
Sep 05 Javascript
jQueryUI如何自定义组件实现代码
Nov 14 Javascript
学习面向对象之面向对象的基本概念:对象和其他基本要素
Nov 30 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
Oct 09 Javascript
js实现简易的单数字随机抽奖(0-9)
Mar 19 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
Sep 22 Javascript
JS处理json日期格式化问题
Oct 01 Javascript
JavaScript生成二维码图片小结
Dec 27 Javascript
解决给dom元素绑定click等事件无效问题的方法
Feb 17 Javascript
weex slider实现滑动底部导航功能
Aug 28 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
Apr 17 Javascript
JS html事件冒泡和事件捕获操作示例
May 01 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可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
PHPUnit PHP测试框架安装方法
2011/03/23 PHP
跟我学Laravel之安装Laravel
2014/10/15 PHP
php生成年月日下载列表的方法
2015/04/24 PHP
PHP数据库操作三:redis用法分析
2017/08/16 PHP
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
用JavaScript实现UrlEncode和UrlDecode的脚本代码
2008/07/23 Javascript
javascript 函数参数限制说明
2010/11/19 Javascript
jQuery对象和Javascript对象之间转换的实例代码
2013/03/20 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
2013/10/22 Javascript
HTML页面登录时的JS验证方法
2014/05/28 Javascript
node.js中的fs.chmodSync方法使用说明
2014/12/18 Javascript
Javascript中setTimeOut和setInterval的定时器用法
2015/06/12 Javascript
JS组件Bootstrap Table使用方法详解
2016/02/02 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
2016/03/11 Javascript
jquery对dom节点的操作【推荐】
2016/04/15 Javascript
手机Web APP如何实现分享多平台功能
2016/08/19 Javascript
js实现日历的简单算法
2017/01/24 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
2017/06/30 Javascript
require.js中的define函数详解
2017/07/10 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
2019/07/20 Javascript
Node.js学习教程之Module模块
2019/09/03 Javascript
vue给对象动态添加属性和值的实例
2019/09/09 Javascript
微信小程序vant弹窗组件的实现方式
2020/02/21 Javascript
Python实现去除列表中重复元素的方法小结【4种方法】
2018/04/27 Python
python统计字母、空格、数字等字符个数的实例
2018/06/29 Python
Python实现的爬取百度贴吧图片功能完整示例
2019/05/10 Python
解决在pycharm运行代码,调用CMD窗口的命令运行显示乱码问题
2019/08/23 Python
python中for循环变量作用域及用法详解
2019/11/05 Python
优瑞自动咖啡机官网:Jura
2018/09/29 全球购物
Oakley西班牙官方商店:太阳眼镜和男女运动服
2019/04/26 全球购物
秋季校运动会广播稿
2014/02/23 职场文书
离职告别感言
2015/08/04 职场文书
趣味运动会标语口号
2015/12/26 职场文书
详解TypeScript中的类型保护
2021/04/29 Javascript