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实现跟随鼠标移动且带关闭功能的图片广告实例
Feb 26 Javascript
Bootstrap每天必学之缩略图与警示窗
Nov 29 Javascript
javascript实现下拉提示选择框
Dec 29 Javascript
javascript每日必学之多态
Feb 23 Javascript
javascript和jquery实现用户登录验证
May 04 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
Dec 20 Javascript
js时间戳和c#时间戳互转方法(推荐)
Feb 15 Javascript
详解vue.js下引入百度地图jsApi的两种方法
Jul 27 Javascript
10种JavaScript最常见的错误(小结)
Jun 21 Javascript
微信小程序前端promise封装代码实例
Aug 24 Javascript
Vant picker 多级联动操作
Nov 02 Javascript
JavaScript如何利用Promise控制并发请求个数
May 14 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站内搜索并高亮显示关键字的实现代码
2011/12/29 PHP
PHP循环遍历数组的3种方法list()、each()和while总结
2014/11/19 PHP
PHP版本如何选择?应该使用哪个版本?
2015/05/13 PHP
CI框架AR数据库操作常用函数总结
2016/11/21 PHP
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
2013/04/21 Javascript
jQuery.trim() 函数及trim()用法详解
2015/10/26 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
js严格模式总结(分享)
2016/08/22 Javascript
JavaScript数组方法的错误使用例子
2018/09/13 Javascript
JS中验证整数和小数的正则表达式
2018/10/08 Javascript
Jquery获取radio选中值实例总结
2019/01/17 jQuery
JS去除字符串最后的逗号实例分析【四种方法】
2019/06/20 Javascript
[02:26]DOTA2英雄米拉娜基础教程
2013/11/25 DOTA
python optparse模块使用实例
2015/04/09 Python
Python中使用ElementTree解析XML示例
2015/06/02 Python
python实现抖音视频批量下载
2018/06/20 Python
python,Django实现的淘宝客登录功能示例
2019/06/12 Python
使用Python实现文字转语音并生成wav文件的例子
2019/08/08 Python
Python爬虫爬取煎蛋网图片代码实例
2019/12/16 Python
新建文件时Pycharm中自动设置头部模板信息的方法
2020/04/17 Python
python各种excel写入方式的速度对比
2020/11/10 Python
快速创建python 虚拟环境
2020/11/28 Python
Pycharm 设置默认解释器路径和编码格式的操作
2021/02/05 Python
css3 给背景设置渐变色的方法
2019/09/12 HTML / CSS
详解html5页面 rem 布局适配方法
2018/01/12 HTML / CSS
美国专注于健康商品的网站:eVitamins
2017/01/23 全球购物
Champs Sports加拿大:北美最大的以商场为基础的专业运动鞋和服装零售商之一
2018/05/01 全球购物
Hotels.com日本:国外和海外住宿,酒店预订
2019/12/13 全球购物
优秀研究生自我鉴定
2013/12/04 职场文书
时尚休闲吧创业计划书
2014/01/25 职场文书
森林防火宣传标语
2014/06/27 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
群众路线四风问题整改措施
2014/09/27 职场文书
党员检讨书
2014/10/13 职场文书
2015秋学期开学寄语
2015/05/28 职场文书
处罚决定书范文
2015/06/24 职场文书