jquery实现控制表格行高亮实例
[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);
})*/
})
相关文章
本文简单说明php用json如何跨域调用，一个小例子，大家看一下就明白2013-11-11
这篇文章主要为大家详细介绍了jQuery实现动态添加标签事件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要介绍了jQuery 1.9.1源码分析系列（十三）之位置大小操作的相关资料,需要的朋友可以参考下2015-12-12
通过$.each，可以遍历对象、数组的属性值并进行处理，下面有个示例，需要的朋友可以参考下2014-07-07
jQuery遍历之next()、nextAll()方法使用实例
这篇文章主要介绍了jQuery遍历之next()、nextAll()方法使用实例,本文先是给出了实例代码,然后对代码的作用分析和说明,需要的朋友可以参考下2014-11-11
jquery获取当前年份、获取当前月份（0——11），具体思路及代码如下，感兴趣的朋友可以参考下哈，希望可以帮助到你2013-05-05
这篇文章主要介绍了jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法,涉及jQuery响应鼠标事件动态操作页面元素属性的相关技巧,需要的朋友可以参考下2015-11-11
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
正如标题所言会用到removeClass移除CSS类、addClass添加CSS类、toggleClass添加或者移除CSS类，hasClass判断是否已经存在CSS2014-08-08
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
键盘事件处理所有用户在键盘敲击的情况，不管在文本输入区域内部还是外部，这里介绍下jquery键盘事件的相关知识，需要的朋友可以参考下2014-05-05
这篇文章主要介绍了jQuery 筛选器简单操作,结合实例形式详细分析了jQuery筛选器针对元素、字符串、属性等操作常见技巧与操作注意实行,需要的朋友可以参考下2019-10-10
最新评论