1



首先，我是 javascript/jquery 的新手，我在 stackoverflow 上找到了几个用于在 html 表上隐藏列的示例，这就是我需要的：
通过使用 jQuery 选中复选框来自动隐藏表列
它适用于 jsfiddle：
http：/ /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 中，左上角的第二个下拉菜单通常设置为“onLoad”，它会自动触发此行为。

于 2013-04-22T14:38:56.173 回答