jquery实现控制表格行高亮实例
[css]
<style>
.height{
background:#666666; /*背景颜色为灰色*/
}
tr{
cursor:pointer; /*手形*/
}
</style>
<style>
.height{
background:#666666; /*背景颜色为灰色*/
}
tr{
cursor:pointer; /*手形*/
}
</style>
[html]
<body>
<tableborder="1"width="40%">
<tr><th></th><thalign="left">姓名</th><thalign="left">性别</th><thalign="left">居住地</th></tr>
<tr>
<td><inputtype="radio"name="radio"/></td><td>张三</td><td>男</td><td>北京</td>
</tr>
<tr>
<td><inputtype="radio"name="radio"/></td><td>李四</td><td>男</td><td>上海</td>
</tr>
<tr>
<td><inputtype="radio"name="radio"/></td><td>王五</td><td>女</td><td>深圳</td>
</tr>
<tr>
<td><inputtype="radio"name="radio"/></td><td>赵六</td><td>女</td><td>北京</td>
</tr>
<tr>
<td><inputtype="radio"name="radio"/></td><td>孙七</td><td>男</td><td>上海</td>
</tr>
</table>
</body>
<body>
<tableborder="1"width="40%">
<tr><th></th><thalign="left">姓名</th><thalign="left">性别</th><thalign="left">居住地</th></tr>
<tr>
<td><inputtype="radio"name="radio"/></td><td>张三</td><td>男</td><td>北京</td>
</tr>
<tr>
<td><inputtype="radio"name="radio"/></td><td>李四</td><td>男</td><td>上海</td>
</tr>
<tr>
<td><inputtype="radio"name="radio"/></td><td>王五</td><td>女</td><td>深圳</td>
</tr>
<tr>
<td><inputtype="radio"name="radio"/></td><td>赵六</td><td>女</td><td>北京</td>
</tr>
<tr>
<td><inputtype="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);
})*/
})
相关文章
- 阻止HTML表单提交跳转页面,使用 Jquery Ajax 请求接口
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js详解编程语言
- jQuery mouseover和mouseout事件
- jquery中dom操作和事件的实例学习下拉框应用
- jQuery提交表单ajax查询实例代码
- jQuery常见开发技巧详细整理
- 基于jquery实现拆分姓名的方法(纯JS版)
- JQuery中关于jquery.js与jquery.min.js的比较探讨
- jquery实现的可隐藏重现的靠边悬浮层实例代码
- 用jquery生成二级菜单的实例代码
- jQuery客户端分页实例代码
- jquery实现图片滚动效果的简单实例
- JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
- php配合jquery实现增删操作具体实例
- Jquery过滤器(first,last,not,even,odd)的使用
- 浅析jquery的js图表组件highcharts
- jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
- jquery重复提交请求的原因浅析
- jquery动态调整div大小使其宽度始终为浏览器宽度
- jquery中post方法用法实例
- 修改或扩展jQuery原生方法的代码实例
- JQuery设置获取下拉菜单某个选项的值(比较全)
- jQuery调取jSon数据并展示的方法