jquery實(shí)現(xiàn)控制表格行高亮實(shí)例
[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)") 第一行標(biāo)題不起作用
$("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)") 第一行標(biāo)題不起作用
$("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)文章
利用jQuery實(shí)現(xiàn)可輸入搜索文字的下拉框
jQuery實(shí)現(xiàn)點(diǎn)擊下拉框輸入框時(shí),自動(dòng)顯示下面的下拉列表,而且是根據(jù)輸入框中輸入的搜索添加,自動(dòng)在后臺(tái)查找,然后傳到前臺(tái),展現(xiàn)頁面2013-10-10jQuery截取指定長度字符串的實(shí)現(xiàn)原理及代碼
截取指定長度字符串操作在新聞列表這種類型的操作中大量應(yīng)用,下面有個(gè)示例,大家可以參考下2014-07-07實(shí)現(xiàn)點(diǎn)擊下箭頭變上箭頭來回切換的兩種方法【推薦】
本文主要介紹了實(shí)現(xiàn)點(diǎn)擊下箭頭變上箭頭來回切換的兩種方法,具有很好的參考價(jià)值,需要的朋友一起來看下吧2016-12-12基于jQuery的讓非HTML5瀏覽器支持placeholder屬性的代碼
寫了一小段代碼讓非HTML5瀏覽器支持placeholder屬性。零配置零css支持IE62011-05-05jQuery中append、insertBefore、after與insertAfter的簡單用法與注意事項(xiàng)
這篇文章主要為大家介紹了jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng),需要的朋友可以參考下2010-12-12jQuery實(shí)現(xiàn)圖片信息的浮動(dòng)顯示實(shí)例代碼
圖片信息的浮動(dòng)顯示的效果,在網(wǎng)頁應(yīng)用中還是比較流行的,下面為大家詳細(xì)介紹下使用jquery是如何實(shí)現(xiàn)的,喜歡的朋友可以參考下2013-08-08jQuery Ajax Post 回調(diào)函數(shù)不執(zhí)行問題的解決方法
本文是小編給大家?guī)淼膉Query Ajax Post 回調(diào)函數(shù)不執(zhí)行的原因及解決方法,在本文最下面還給大家附加jquery Ajax 不執(zhí)行回調(diào)函數(shù)success的原因,這兩個(gè)問題都非常多見,感興趣的朋友一起看下吧2016-08-08jQuery創(chuàng)建及操作xml格式數(shù)據(jù)示例
這篇文章主要介紹了jQuery創(chuàng)建及操作xml格式數(shù)據(jù),結(jié)合實(shí)例形式分析了jQuery針對(duì)xml格式數(shù)據(jù)的創(chuàng)建、解析、添加等相關(guān)操作技巧,需要的朋友可以參考下2018-05-05Jquery 選中表格一列并對(duì)表格排序?qū)崿F(xiàn)原理
該實(shí)現(xiàn)的主要思想是:獲取鼠標(biāo)點(diǎn)擊的表頭單元格的列號(hào),遍歷數(shù)據(jù)行,獲取每個(gè)<tr>中的html,同時(shí)獲取每個(gè)<tr>標(biāo)簽下對(duì)應(yīng)獲取到的列號(hào)的<td>標(biāo)簽中的內(nèi)容,并取得<th>標(biāo)簽的type屬性值,需要的朋友可以了解下2012-12-12