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 相关文章推荐
多广告投放代码 推荐
Nov 13 Javascript
script标签属性用type还是language
Jan 21 Javascript
jquery实现搜索框常见效果的方法
Jan 22 Javascript
jQuery菜单插件superfish使用指南
Apr 21 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
Aug 05 Javascript
js生成随机数的过程解析
Nov 24 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
Dec 17 Javascript
jQuery实现的超简单点赞效果实例分析
Dec 31 Javascript
利用JS提交表单的几种方法和验证(必看篇)
Sep 17 Javascript
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
详解基于Vue+Koa的pm2配置
Oct 24 Javascript
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
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
ASP和PHP实现生成网站快捷方式并下载到桌面的方法
2014/05/08 PHP
php使用自定义函数实现汉字分割替换功能示例
2017/01/30 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
JavaScript 字符编码规则
2009/05/04 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
js中的数组Array定义与sort方法使用示例
2013/08/29 Javascript
基于jquery实现的文字淡入淡出效果
2013/11/14 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
2015/12/04 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
2017/06/08 Javascript
js+css实现打字效果
2020/06/24 Javascript
实例详解Node.js 函数
2018/06/10 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
2018/09/21 Javascript
Vue 实现前端权限控制的示例代码
2019/07/09 Javascript
swiper实现异形轮播效果
2019/11/28 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
2020/11/11 Javascript
[47:31]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.12
2020/12/16 DOTA
Perl中著名的Schwartzian转换问题解决实现
2015/06/02 Python
python 重定向获取真实url的方法
2018/05/11 Python
Python操作Sql Server 2008数据库的方法详解
2018/05/17 Python
Tesserocr库的正确安装方式
2018/10/19 Python
python 实现查找文件并输出满足某一条件的数据项方法
2019/06/12 Python
Python函数中参数是传递值还是引用详解
2019/07/02 Python
Python实现串口通信(pyserial)过程解析
2019/09/25 Python
Django3.0 异步通信初体验(小结)
2019/12/04 Python
在Tensorflow中实现梯度下降法更新参数值
2020/01/23 Python
python3 简单实现组合设计模式
2020/07/02 Python
Python 整行读取文本方法并去掉readlines换行\n操作
2020/09/03 Python
阿拉伯世界最大的电子商务网站:Souq沙特阿拉伯
2016/10/28 全球购物
医学护理系毕业生求职信
2013/10/01 职场文书
父亲追悼会答谢词
2014/01/17 职场文书
大学生万能检讨书范例
2014/10/04 职场文书
2015年管理人员工作总结
2015/05/13 职场文书
导游词之新疆-喀纳斯
2019/10/10 职场文书
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis
vue实现拖拽交换位置
2022/04/07 Vue.js