jquery實現(xiàn)控制表格行高亮實例
[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);
})*/
})
相關(guān)文章
實現(xiàn)點擊下箭頭變上箭頭來回切換的兩種方法【推薦】
本文主要介紹了實現(xiàn)點擊下箭頭變上箭頭來回切換的兩種方法,具有很好的參考價值,需要的朋友一起來看下吧2016-12-12基于jQuery的讓非HTML5瀏覽器支持placeholder屬性的代碼
寫了一小段代碼讓非HTML5瀏覽器支持placeholder屬性。零配置零css支持IE62011-05-05jQuery中append、insertBefore、after與insertAfter的簡單用法與注意事項
這篇文章主要為大家介紹了jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項,需要的朋友可以參考下2010-12-12jQuery Ajax Post 回調(diào)函數(shù)不執(zhí)行問題的解決方法
本文是小編給大家?guī)淼膉Query Ajax Post 回調(diào)函數(shù)不執(zhí)行的原因及解決方法,在本文最下面還給大家附加jquery Ajax 不執(zhí)行回調(diào)函數(shù)success的原因,這兩個問題都非常多見,感興趣的朋友一起看下吧2016-08-08jQuery創(chuàng)建及操作xml格式數(shù)據(jù)示例
這篇文章主要介紹了jQuery創(chuàng)建及操作xml格式數(shù)據(jù),結(jié)合實例形式分析了jQuery針對xml格式數(shù)據(jù)的創(chuàng)建、解析、添加等相關(guān)操作技巧,需要的朋友可以參考下2018-05-05Jquery 選中表格一列并對表格排序?qū)崿F(xiàn)原理
該實現(xiàn)的主要思想是:獲取鼠標點擊的表頭單元格的列號,遍歷數(shù)據(jù)行,獲取每個<tr>中的html,同時獲取每個<tr>標簽下對應(yīng)獲取到的列號的<td>標簽中的內(nèi)容,并取得<th>標簽的type屬性值,需要的朋友可以了解下2012-12-12