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 相关文章推荐
jQuery 位置插件
Dec 25 Javascript
javascript动态判断html元素并执行不同的操作
Jun 16 Javascript
JavaScript通过prototype给对象定义属性用法实例
Mar 23 Javascript
javascript设计模式--策略模式之输入验证
Nov 27 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
Dec 03 Javascript
如何在Angular2中使用jQuery及其插件的方法
Feb 09 Javascript
jquery PrintArea 实现票据的套打功能(代码)
Mar 17 Javascript
深入理解Angular4订阅(Subscribe)与取消
Nov 22 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
Oct 19 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
Mar 07 Javascript
layui自定义插件citySelect实现省市区三级联动选择
Jul 26 Javascript
js实现时分秒倒计时
Dec 03 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
一个改进的UBB类
2006/10/09 PHP
如何使用Strace调试工具
2013/06/03 PHP
解析如何屏蔽php中的phpinfo()函数
2013/06/06 PHP
php上传文件中文文件名乱码的解决方法
2013/11/01 PHP
php中{}大括号是什么意思
2013/12/01 PHP
PHP防范SQL注入的具体方法详解(测试通过)
2014/05/09 PHP
CI框架表单验证实例详解
2016/11/21 PHP
PHP给前端返回一个JSON对象的实例讲解
2018/05/31 PHP
更正确的asp冒泡排序
2007/05/24 Javascript
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
2011/07/27 Javascript
JQuery UI的拖拽功能实现方法小结
2012/03/14 Javascript
JavaScript队列、优先队列与循环队列
2016/11/14 Javascript
angular2倒计时组件使用详解
2017/01/12 Javascript
vue-resource 拦截器使用详解
2017/02/21 Javascript
使用原生js写ajax实例(推荐)
2017/05/31 Javascript
解决npm管理员身份install时出现权限的问题
2018/03/16 Javascript
vue-cli 引入、配置axios的方法
2018/05/08 Javascript
Vue配合iView实现省市二级联动的示例代码
2018/07/27 Javascript
JavaScript多种页面刷新方法小结
2019/04/04 Javascript
vue 解决异步数据更新问题
2019/10/29 Javascript
js抽奖转盘实现方法分析
2020/05/16 Javascript
[02:09]DOTA2辉夜杯 EHOME夺冠举杯现场
2015/12/28 DOTA
python版简单工厂模式
2017/10/16 Python
python print 按逗号或空格分隔的方法
2018/05/02 Python
pandas DataFrame 行列索引及值的获取的方法
2019/07/02 Python
python实现点击按钮修改数据的方法
2019/07/17 Python
Python3.6安装卸载、执行命令、执行py文件的方法详解
2020/02/20 Python
pandas之分组groupby()的使用整理与总结
2020/06/18 Python
Python使用OpenPyXL处理Excel表格
2020/07/02 Python
C#笔试题集合
2013/06/21 面试题
求职意向书
2014/04/01 职场文书
2014年教师党员公开承诺书
2014/05/28 职场文书
校长师德师风自我剖析材料
2014/09/29 职场文书
2014年四风个人对照检查及整改措施
2014/10/28 职场文书
python使用opencv对图像添加噪声(高斯/椒盐/泊松/斑点)
2022/04/06 Python