JavaScript/jQuery {Article005}

説明文の表示 ライブデモを見る▶
ようこそ「JavaScript/jQuery」へ...

jQueryを使用して表の行に表示されているCheckBoxをクリックして行を選択する

Coming soon...

作成手順

Coming soon...

操作手順

  1. サンプルが表示されたらこのページの先頭に移動して「説明文の表示・非表示切り替え」をチェックして説明文を非表示にします。 もしくは「ライブデモを見る...」のリンクをクリックします。説明文が非表示になります。

  2. 「Live DEMO」の直下に表示されている表からチェックボックスをクリックしてチェックされた状態にします。

  3. チェックした行が黄色の背景色でハイライトされます。

  4. 今度はチェックを外して見てください。行が以前の背景色に戻ります。 行3の編集行や行10の挿入行もチェックして見てください。

Live DEMO

Rows:10 1/2 (Page Size:5)
* HeaderRow.Col1 HeaderRow.Col2 HeaderRow.Col3
Item1.Row1.Col1 Item1.Row1.Col2 Item1.Row1.Col3
Item2.Row2.Col1 Item2.Row2.Col2 Item2.Row2.Col3
Item4.Row4.Col1 Item4.Row4.Col2 Item4.Row4.Col3
Item5.Row5.Col1 Item5.Row5.Col2 Item5.Row5.Col3
Item6.Row6.Col1 Item6.Row6.Col2 Item6.Row6.Col3
Item7.Row7.Col1 Item7.Row7.Col2 Item7.Row7.Col3
Item8.Row8.Col1 Item8.Row8.Col2 Item8.Row8.Col3
Item9.Row9.Col1 Item9.Row9.Col2 Item9.Row9.Col3
Rows:10 1/2 (Page Size:5)