编程 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 相关文章推荐

JavaScript delete操作符应用实例

Jan 13 Javascript

用showModalDialog弹出页面后，提交表单总是弹出一个新窗口

Jul 18 Javascript

[原创]js获取数组任意个不重复的随机数组元素

Mar 15 Javascript

浏览器脚本兼容文本框中,回车键触发事件的兼容

Jun 21 Javascript

通过继承IHttpHandle实现JS插件的组织与管理

Jul 13 Javascript

实例分析javascript中的call()和apply()方法

Nov 28 Javascript

Vue关于数据绑定出错解决办法

May 15 Javascript

Webpack按需加载打包chunk命名的方法

Sep 22 Javascript

vue 获取及修改store.js里的公共变量实例

Nov 06 Javascript

node事件循环和process模块实例分析

Feb 14 Javascript

vue项目开启Gzip压缩和性能优化操作

Oct 26 Javascript

js制作提示框插件

Dec 24 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

德生9700DX电路分析

2021/03/02 无线电

介绍一些PHP判断变量的函数

2012/04/24 PHP

PHP实现算式验证码和汉字验证码实例

2015/03/09 PHP

php正则preg_replace_callback函数用法实例

2015/06/01 PHP

ThinkPHP5分页paginate代码实例解析

2020/11/10 PHP

XP折叠菜单&仿QQ2006菜单

2006/12/16 Javascript

jQuery select的操作实现代码

2009/05/06 Javascript

javascript中的关于类型转换的性能优化

2010/12/14 Javascript

JS+JSP checkBox 全选具体实现

2014/01/02 Javascript

JQuery实现当鼠标停留在某区域3秒后自动执行

2014/09/09 Javascript

轻松创建nodejs服务器（10）：处理POST请求

2014/12/18 NodeJs

详解js的六大数据类型

2016/12/27 Javascript

JS判断非空至少输入两个字符的简单实现方法

2017/06/23 Javascript

深入解析Vue 组件命名那些事

2017/07/18 Javascript

postman+json+springmvc测试批量添加实例

2018/03/31 Javascript

GOJS+VUE实现流程图效果

2018/12/01 Javascript

详解如何用webpack4从零开始构建react开发环境

2019/01/27 Javascript

qrcode生成二维码微信长按无法识别问题的解决

2019/04/04 Javascript

Layui点击图片弹框预览的实现方法

2019/09/16 Javascript

Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩）

2019/10/23 Javascript

解决父组件将子组件作为弹窗调用只执行一次created的问题

2020/07/24 Javascript

[02:36]DOTA2亚洲邀请赛小组赛精彩集锦：奇迹哥卡尔秀翻全场

2017/03/28 DOTA

Python中的下划线详解

2015/06/24 Python

python中getaddrinfo()基本用法实例分析

2015/06/28 Python

Python实现的文本编辑器功能示例

2017/06/30 Python

程序员写Python时的5个坏习惯，你有几条？

2018/11/26 Python

详解利用Python scipy.signal.filtfilt() 实现信号滤波

2019/06/05 Python

pandas中的数据去重处理的实现方法

2020/02/10 Python

python gui开发——制作抖音无水印视频下载工具(附源码)

2021/02/07 Python

小米乌克兰网上商店：Xiaomi.UA

2019/10/29 全球购物

艺校音乐专业自我鉴定范文

2014/03/01 职场文书

竞选副班长演讲稿

2014/04/24 职场文书

2014年纳税评估工作总结

2014/12/23 职场文书

青年文明号申报材料

2014/12/23 职场文书

利用 JavaScript 构建命令行应用

2021/11/17 Javascript

python+pyhyper实现识别图片中的车牌号思路详解

2022/12/24 Python