torazuka/filter.html

## filter.html
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>filter</title>
        <script type="text/javascript" src="../scripts/jquery.js"></script>
        <script>
            $(document).ready(function() {
                $("button").click(function() {
                    $("tr").css("background-color", "inherit");
                    $("td").css("background-color", "inherit");
                });

                $("#highlite-odd").click(function() {
                    $("tr:odd").css("background-color", "#00cccc");
                });
                $("#highlite-even").click(function() {
                    $("tr:even").css("background-color", "#ff9999");
                });
                $("#highlite-first").click(function() {
                    $("tr:first").css("background-color", "#ff6600");
                });
                $("#highlite-last").click(function() {
                    $("tr:last").css("background-color", "#00cc66");
                });
                $("#highlite-column1").click(function() {
                    $("td.c1").css("background-color", "#ffcc00");
                });
                $("#highlite-column2").click(function() {
                    $("td.c2").css("background-color", "#ffcc00");
                });
                $("#highlite-column3").click(function() {
                    $("td.c3").css("background-color", "#ffcc00");
                });
            });
        </script>
    </head>
    <body>
        <h1>filter</h1>
        <h2>テーブル</h2>
        <table>
            <tr>
                <td class="c1">hoge</td>
                <td class="c2">moga</td>
                <td class="c3">piyo</td>
            </tr>
            <tr>
                <td class="c1">fuga</td>
                <td class="c2">garu</td>
                <td class="c3">garu</td>
            </tr>
            <tr>
                <td class="c1">ahou</td>
                <td class="c2">baka</td>
                <td class="c3">cine</td>
            </tr>
        </table>
        <h3>ハイライトボタン</h3>
        <button type="button" id="highlite-odd">奇数行</button>
        <button type="button" id="highlite-even">偶数行</button><br/>
        <button type="button" id="highlite-first">最初の行</button>
        <button type="button" id="highlite-last">最後の行</button><br/>
        <button type="button" id="highlite-column1">1列目</button>
        <button type="button" id="highlite-column2">2列目</button>
        <button type="button" id="highlite-column3">3列目</button>
        <h2>テスト</h2>
        <p>ボタンを押すと、フィルタで指定した行（または列）の背景色が変わる。それ以外の行（または列）の背景色はリセットされる。</p>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>filter</title>
	<script type="text/javascript" src="../scripts/jquery.js"></script>
	<script>
	$(document).ready(function() {
	$("button").click(function() {
	$("tr").css("background-color", "inherit");
	$("td").css("background-color", "inherit");
	});

	$("#highlite-odd").click(function() {
	$("tr:odd").css("background-color", "#00cccc");
	});
	$("#highlite-even").click(function() {
	$("tr:even").css("background-color", "#ff9999");
	});
	$("#highlite-first").click(function() {
	$("tr:first").css("background-color", "#ff6600");
	});
	$("#highlite-last").click(function() {
	$("tr:last").css("background-color", "#00cc66");
	});
	$("#highlite-column1").click(function() {
	$("td.c1").css("background-color", "#ffcc00");
	});
	$("#highlite-column2").click(function() {
	$("td.c2").css("background-color", "#ffcc00");
	});
	$("#highlite-column3").click(function() {
	$("td.c3").css("background-color", "#ffcc00");
	});
	});
	</script>
	</head>
	<body>
	<h1>filter</h1>
	<h2>テーブル</h2>
	<table>
	<tr>
	<td class="c1">hoge</td>
	<td class="c2">moga</td>
	<td class="c3">piyo</td>
	</tr>
	<tr>
	<td class="c1">fuga</td>
	<td class="c2">garu</td>
	<td class="c3">garu</td>
	</tr>
	<tr>
	<td class="c1">ahou</td>
	<td class="c2">baka</td>
	<td class="c3">cine</td>
	</tr>
	</table>
	<h3>ハイライトボタン</h3>
	<button type="button" id="highlite-odd">奇数行</button>
	<button type="button" id="highlite-even">偶数行</button><br/>
	<button type="button" id="highlite-first">最初の行</button>
	<button type="button" id="highlite-last">最後の行</button><br/>
	<button type="button" id="highlite-column1">1列目</button>
	<button type="button" id="highlite-column2">2列目</button>
	<button type="button" id="highlite-column3">3列目</button>
	<h2>テスト</h2>
	<p>ボタンを押すと、フィルタで指定した行（または列）の背景色が変わる。それ以外の行（または列）の背景色はリセットされる。</p>
	</body>
	</html>