Question

最重要的是，我是javascript / jquery的新手，我在stackoverflow上找到了几个隐藏html表列的例子，这就是我需要的：
hide table columns automatically by checking a checkbox with 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>

<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>

感谢任何帮助：请尽可能简单地解释它，就像我写的那样。提前谢谢！

Answer 1

您需要将代码包装在$(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”，这会自动触发此行为。

用jquery隐藏列？

1 个答案: