1



まず第一に、私はjavascript/jqueryの初心者です.htmlテーブルの列を非表示にするためのstackoverflowの例をいくつか見つけまし
た
.
/jsfiddle.net/highwayoflife/8BahZ/4/

しかし、私は何を間違っているのか、なぜ私がそれをまとめたときにうまくいかないのか分かりません: 

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>tablazat</title>
    <style>
        td, th {
            padding: 6px;
            border: 1px solid black;
        }
        th {
            background-color: #f0eae2;
            font-weight: bold;
        }
        table {
            border: 1px solid black;
        }
    </style>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script language="javascript">  
        $("input:checkbox:not(:checked)").each(function () {
            var column = "table ." + $(this).attr("name");
            $(column).hide();
        });

        $("input:checkbox").click(function () {
            var column = "table ." + $(this).attr("name");
            $(column).toggle();
        });
    </script>
</head>
<body>

    <p><input type="checkbox" name="first_name" checked="checked" /> First Name</p>
    <p><input type="checkbox" name="last_name" /> Last Name</p>
    <p><input type="checkbox" name="email" checked="checked" /> Email</p>

    <table id="report">
        <thead>
            <tr>
                 <th class="first_name">First Name</th>
                 <th class="last_name">Last Name</th>
                 <th class="email">Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                 <td class="first_name">Larry</td>
                 <td class="last_name">Hughes</td>
                 <td class="email">larry@gmail.com</td>
            </tr>
            <tr>
                 <td class="first_name">Mike</td>
                 <td class="last_name">Tyson</td>
                 <td class="email">mike@gmail.com</td>
            </tr>
        </tbody>    
    </table>
</body>

私が書いたように、できるだけ簡単に説明してください。前もって感謝します！

4

1 に答える 1

2

$(document).readyこれらのチェックボックスはまだ存在しないため、コードをブロックでラップするか、ページの下部に移動する必要があります。

<script language="javascript">  
  $(document).ready(function() {
    $("input:checkbox:not(:checked)").each(function () {
        var column = "table ." + $(this).attr("name");
        $(column).hide();
    });

    $("input:checkbox").click(function () {
        var column = "table ." + $(this).attr("name");
        $(column).toggle();
    });
  });
</script>

jsFiddle では、通常、左上隅の 2 番目のドロップダウンが「onLoad」に設定されており、この動作が自動的にトリガーされます。

于 2013-04-22T14:38:56.173 に答える