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)") 第一行標(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)文章
本文簡單說明php用json如何跨域調(diào)用，一個小例子，大家看一下就明白2013-11-11
jQuery實現(xiàn)動態(tài)添加標(biāo)簽事件
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)動態(tài)添加標(biāo)簽事件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了jQuery 1.9.1源碼分析系列（十三）之位置大小操作的相關(guān)資料,需要的朋友可以參考下2015-12-12
通過$.each，可以遍歷對象、數(shù)組的屬性值并進行處理，下面有個示例，需要的朋友可以參考下2014-07-07
jQuery遍歷之next()、nextAll()方法使用實例
這篇文章主要介紹了jQuery遍歷之next()、nextAll()方法使用實例,本文先是給出了實例代碼,然后對代碼的作用分析和說明,需要的朋友可以參考下2014-11-11
jQuery動態(tài)地獲取系統(tǒng)時間實現(xiàn)代碼
jquery獲取當(dāng)前年份、獲取當(dāng)前月份（0——11），具體思路及代碼如下，感興趣的朋友可以參考下哈，希望可以幫助到你2013-05-05
jQuery實現(xiàn)選中彈出窗口選擇框內(nèi)容后賦值給文本框的方法
這篇文章主要介紹了jQuery實現(xiàn)選中彈出窗口選擇框內(nèi)容后賦值給文本框的方法,涉及jQuery響應(yīng)鼠標(biāo)事件動態(tài)操作頁面元素屬性的相關(guān)技巧,需要的朋友可以參考下2015-11-11
jQuery添加/改變/移除CSS類及判斷是否已經(jīng)存在CSS
正如標(biāo)題所言會用到removeClass移除CSS類、addClass添加CSS類、toggleClass添加或者移除CSS類，hasClass判斷是否已經(jīng)存在CSS2014-08-08
jQuery事件之鍵盤事件(ctrl+Enter回車鍵提交表單等)
鍵盤事件處理所有用戶在鍵盤敲擊的情況，不管在文本輸入?yún)^(qū)域內(nèi)部還是外部，這里介紹下jquery鍵盤事件的相關(guān)知識，需要的朋友可以參考下2014-05-05
這篇文章主要介紹了jQuery 篩選器簡單操作,結(jié)合實例形式詳細分析了jQuery篩選器針對元素、字符串、屬性等操作常見技巧與操作注意實行,需要的朋友可以參考下2019-10-10