テーブル行の強調表示を制御する jquery 実装 example_jquery

[css]

コードをコピー コードは次のとおりです:

.height{
バックグラウンド:#666666; /*背景色はグレーです*/
}
カーソル: ポインタ;




[html]

コードをコピー コードは次のとおりです:

<表の境界線="1" 幅="40%">
姓性别< th align="left"> 居住地

张三男< ;td>北京


李四男< ;td>上海


王五女< ;td>深圳


赵六女< ;td>北京


孙七男< ;td>上海

< ;tr>










< td>上海

	姓	性别	居住地
	张三	男	北京
	李四	男	上海
	王五	女	深圳
< /td>	赵六	女	北京
	孙七	男

jquery

[javascript]

复制代码代码如下:

plaincopyprint?$(document).ready(function(){
//最初の書き方: $("tr:gt(0)") タイトルの最初の行は機能しません
$("tr:gt(0)").click(function(){
$(this).addClass("height").siblings().removeClass("height").end()。 find( ":radio").attr("チェック済み",true);
$("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("高さ").siblings().removeClass("高さ").end().find(":radio" ) .attr("checked",true);
})

//2 番目の書き方: $("tr:not(:first)")
/*$("tr : not(:first)").click(function(){
$(this).addClass("height").siblings().removeClass("height").end().find(":radio " ).attr("checked",true);
})*/
})