読者です 読者をやめる 読者になる 読者になる

かまたま日記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">列1</td>
    <td width="100">列2</td>
    <td width="100">列3</td>
  </tr>
  <tr class="row0">
    <td width="" align="center">
      <input name="hideKey" type="checkbox" value="0">
    </td>
    <td width="100">1−1</td>
    <td width="100">1−2</td>
    <td width="100">1−3</td>
  </tr>
  <tr class="row1">
    <td width="" align="center">
      <input name="hideKey" type="checkbox" value="0">
    </td>
    <td width="100">2−1</td>
    <td width="100">2−2</td>
    <td width="100">2−3</td>
  </tr>
  <tr class="row2">
    <td width="" align="center">
      <input name="hideKey" type="checkbox" value="0">
    </td>
    <td width="100">3−1</td>
    <td width="100">3−2</td>
    <td width="100">3−3</td>
  </tr>
</table>
</DIV>
</form>
</body>
</html>

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