かまたま日記3

プログラミングメイン、たまに日常

チェックボックスで選択した行を隠す

JavaScript jQuery HTML

チェックボックスで選択した行を隠すためのサンプルです。
jQueryを使ってすっきり書けた（ような気がする）ので晒してみます。

また、行の絞込みが目的なので一度消してしまうと復活はしません

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>CheckBoxHideSample</title>
<style type="text/css">
<!--
/* 行を隠すためのスタイル */
.hide{
	display:none;
}-->
</style>
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script language="javascript">
<!--
	function hide() {
		// チェックボックスのオブジェクトリストを取得
		var hideKeys = $('[name="hideKey"]').get();
		for(i in hideKeys) {
			// チェックボックスがチェックされていない場合、行を消す
			if(!hideKeys[i].checked) {
				// 行にクラス「hide」を追加
				$("#table .row" + i).addClass('hide');
			}
		}
	}
-->
</script>
</head>
<body>
<form name="form" method="post">
<DIV id="table">
<table width="350" border="1">
  <tr align="center">
    <td width=""><input type="button" onClick="hide();" value="選択"></td>
    <td width="100">列１</td>
    <td width="100">列２</td>
    <td width="100">列３</td>
  </tr>
  <tr class="row0">
    <td width="" align="center">
      <input name="hideKey" type="checkbox" value="0">
    </td>
    <td width="100">１−１</td>
    <td width="100">１−２</td>
    <td width="100">１−３</td>
  </tr>
  <tr class="row1">
    <td width="" align="center">
      <input name="hideKey" type="checkbox" value="0">
    </td>
    <td width="100">２−１</td>
    <td width="100">２−２</td>
    <td width="100">２−３</td>
  </tr>
  <tr class="row2">
    <td width="" align="center">
      <input name="hideKey" type="checkbox" value="0">
    </td>
    <td width="100">３−１</td>
    <td width="100">３−２</td>
    <td width="100">３−３</td>
  </tr>
</table>
</DIV>
</form>
</body>
</html>

★参考にしたサイト
jqueryで簡単な連動型ドロップダウンリストを作る - [Swb:]渋谷に住むWEBデザイナの備忘録
　列のclass属性を変えるっていうところを参考にさせてもらいました。