JQ--アプリケーションセレクタ（インターレース色変化テーブル、及び選択選択解除）

図1は、カラーチェンジ・テーブルをインターレース：

（1）コアコード：

    < スクリプト> 
            $（関数（）{ 
                $（" TBODY TR：偶数" ）の.css（" 背景色" 、" 赤" ）; 
                $（" TBODY TR：奇数" ）の.css（" 背景色" 、" 黄緑色" ）; 
            }）; 
    </ スクリプト>

TBODY要素を取得し、奇数と偶数列は、異なる色を設定しています。

（2）の効果を示します。

2、すべて選択し、[なし]を選択：

（1）コアコード：

        < スクリプト> 
            $（関数（）{ 
                $（" #select " ）.click（関数（）{ 
                $（" TBODY入力" ）.ATTR（" チェック" 、これは.checkedを）; 
                }）; 
            }）; 
        </ スクリプト>

例えば、以下の一貫性を持つ最初のボックスそのセレクタと設定プロパティの用途。

（2）デモンストレーション効果：

3、完全なコード：

（1）インターレースカラーチェンジ：

<HTML> 
<HEAD> 
        <メタ文字セット= "UTF-8"> 
        <タイトル>成绩登记表格</タイトル> 
        ます。<script type = "text / javascriptの" SRC =」../ JS / jqueryの- 1.8.3.js "> </ SCRIPT> 
		<SCRIPT> 
			$（関数（）{ 
				$（" TBODYのTR：偶数"）、CSS（"背景色」、 "赤"）; 
				$（ "TBODYのTR：奇数"）、CSS（ "背景色"、 "黄緑色"）; 
			}）; 
		</ SCRIPT> 
    </ head> 

    <body> 
        <テーブル幅= "600"ボーダー= "1" ALIGN = "中心" CELLPADDING = "5" CELLSPACING = "3" ID = "TBL"> 
            <キャプション>成绩登记表<
				<TH ALIGN = "中間">姓名</番目> 
				<TD ALIGN = "真ん中"> 88 </ TD>
				<TH ALIGN = "中間">平时成绩</番目> 
				<TH ALIGN ="中間">期末成绩</ TD> 
				<TH ALIGN ="中間">学期总成绩</番目> 
            </ TR> 
        </ THEAD > 
        <TBODY> 
			<TR> 
				<TD ALIGN = "中間"> 1 </ TD> 
				<TD ALIGN ="中間"> 20100300201 </ TD> 
				<TD ALIGN ="中間">张小丽</ TD> 
				<TD ALIGN = "中間"> 95 </ TD> 
				<TD ALIGN ="中間"> 95 </ TD> 
				<TD ALIGN ="中間"> 95 </ TD> 
			</ TR> 

			<TR> 
				<TD ALIGN ="中間"> 2 </ TD>
				<TD ALIGN = "中間"> 20100300202 </ TD> 
				<TD ALIGN ="中間">李宁</ TD> 
				<TD ALIGN ="中間"> 90 </ TD> 
			<TR>
				<TD ALIGN = "中間"> 89 </ TD> 
			</ TR> 

				<TD ALIGN ="中間"> 3 </ TD> 
				<TD ALIGN ="中間"> 20100300203 </ TD> 
				<TD ALIGN ="中間" >刘梅</ TD> 
				<TD ALIGN = "中間"> 98 </ TD> 
				<TD ALIGN ="中間"> 92 </ TD> 
				<TD ALIGN ="中間"> 95 </ TD> 
			</ TR> 

			<TR> 
				<TD ALIGN = "中間"> 4 </ TD> 
				<TD ALIGN ="中間"> 20100300204 </ TD> 
				<TD ALIGN ="中間">王刚</ TD> 
				<TD ALIGN ="中間"> 98 </ TD> 
				<TD ALIGN = "中間"> 90 </ TD> 
				<TD ALIGN = "中間"> 94 </ TD> 
			</ TR> 

			<TR> 
				<TD ALIGN ="中間"> 5 </ TD> 
				<TD ALIGN ="中間"> 20100300205 </ TD> 
				<TD ALIGN = "中間">郑军</ TD> 
				<TD ALIGN ="中間"> 90 </ TD> 
				<TD ALIGN = "ミドル"> 85 </ TD>
				<TD ALIGN = "中間"> 87 </ TD> 
			</ TR> 

			<TR> 
				<TD ALIGN ="中間"> 6 </ TD> 
				<TD ALIGN ="中間"> 20100300206 </ TD> 
				<TD ALIGN = "中間">杨波</ TD> 
				<TD ALIGN ="中間"> 80 </ TD> 
				<TD ALIGN ="中間"> 80 </ TD> 
				<TD ALIGN ="中間"> 80 </ TD> 
			</ TR> 
	    </ TBODY> 
        </ TABLE> 
</ BODY> 
</ HTML>

（2）すべて選択し、[選択なし：

<HTML> 
    <HEAD> 
        <メタ文字セット= "UTF-8"> 
        <タイトル> JQ实现全选和全不选</タイトル> 
        ます。<script type = "text / javascriptの" SRC =」../ JS / jquery- 1.8.3.js」> </ SCRIPT> 
		<SCRIPT> 
			$（関数（）{ 
				$（ "＃選択"）。（関数（）{をクリック
				$（ "TBODY入力を"）。attrの（ ""にチェック、これ。 ）をチェックし; 
				}）; 
			}）; 
		</ SCRIPT> 
    </ head> 

    <body> 
        <テーブル幅= "600"ボーダー= "1" ALIGN = "中心" CELLPADDING = "5" CELLSPACING = "3"> 
            <キャプション>成绩登记表</キャプション> 
            < TR>
				<TH BGCOLOR = "blanchedalmond "ALIGN ="中間">学号</番目> 
			<TR >
				<TH BGCOLOR = "blanchedalmond "ALIGN ="中間">姓名</番目> 
				<TH BGCOLOR =" blanchedalmond "ALIGN ="中間">平时成绩</番目> 
				<TH BGCOLOR =" blanchedalmond "ALIGN ="中間">期末成绩</ TD> 
				<TH BGCOLOR = "blanchedalmond "ALIGN ="中間">学期总成绩</番目> 
            </ TR> 
            
			<TR> 
				<TD>の<input type ="チェックボックス" NAME = "checkOne" /> </ TD> 
				<TD ALIGN = "中間"> 1 </ TD> 
				<TD ALIGN ="中間"> 20100300201 </ TD> 
				<TD ALIGN ="中間">张小丽</ TD> 
				<TD ALIGN ="中間" > 95 </ TD> 
				<TD ALIGN = "中間"> 95 </ TD> 
				<TD ALIGN ="中間"> 95 </ TD> 
			</ TR> 

				<TD>の<input type ="チェックボックス" NAME = "checkOne" /> </ TD> 
				<TD BGCOLOR = "グレー"ALIGN ="中間"> 2 </ TD>
				<TD BGCOLOR = "グレー"ALIGN ="中間"> 20100300202 </ TD> 
				<TD BGCOLOR ="グレー"ALIGN ="中間">李宁</ TD> 
				<TD BGCOLOR ="グレー"ALIGN ="中間"> 90 </ TD> 
				<TD BGCOLOR = "グレー"ALIGN ="中間"> 88 </ TD> 
				<TD BGCOLOR ="グレー"ALIGN ="中間"> 89 </ TD> 
			</ TR> 

			<TR> 
				<TD> <input type = "チェックボックス" NAME = "checkOne" /> </ TD> 
				<TD ALIGN = "中間"> 3 </ TD> 
				<TD ALIGN ="中間"> 20100300203 </ TD> 
				<TD ALIGN ="真ん中">刘梅</ TD> 
				<TD ALIGN ="中間"> 98 </ TD> 
				<TD ALIGN ="中間"> 92 </ TD> 
				<TD ALIGN ="中間"> 95 </ TD> 
			</ TR> 
 
			<TR>
				<TD>の<input type ="チェックボックス」名前= "checkOne" /> </ TD> 
				<TD BGCOLOR = "グレー"ALIGN ="中間"> 4 </ TD>
				<TD BGCOLOR = "グレー"ALIGN ="中間"> 20100300204 </ TD> 
				<TD BGCOLOR ="グレー"ALIGN ="中間">王刚</ TD> 
				<TD BGCOLOR ="グレー"ALIGN ="中間"> 98 </ TD> 
				<TD BGCOLOR = "グレー"ALIGN ="中間"> 90 </ TD> 
				<TD BGCOLOR ="グレー"ALIGN ="中間"> 94 </ TD> 
			</ TR> 

			<TR> 
				<TD> <input type = "チェックボックス" NAME = "checkOne" /> </ TD> 
				<TD ALIGN = "中間"> 5 </ TD> 
				<TD ALIGN ="中間"> 20100300205 </ TD> 
				<TD ALIGN ="真ん中">郑军</ TD> 
				<TD ALIGN ="中間"> 90 </ TD> 
				<TD ALIGN ="中間"> 85 </ TD> 
				<TD ALIGN ="中間"> 87 </ TD> 
			</ TR> 
 
			<TR>
				<TD>の<input type ="チェックボックス」名前= "checkOne" /> </ TD> 
				<TD BGCOLOR = "グレー"ALIGN ="中間"> 6 </ TD> 
				<TD BGCOLOR = "グレー"ALIGN ="中間"> 20100300206 </ TD> 
				<TD BGCOLOR ="グレー"ALIGN ="真ん中">杨波</ TD> 
				<TD BGCOLOR ="グレー"ALIGN ="中間"> 80 </ TD> 
				<TD BGCOLOR ="グレー"ALIGN ="中間"> 80 </ TD> 
				<TD BGCOLOR ="グレー" ALIGN = "中間"> 80 </ TD> 
			</ TR> 
        </ TABLE> 
</ body> 
</ HTML>

JQ--アプリケーションセレクタ（インターレース色変化テーブル、及び選択選択解除）

おすすめ