Question



Firtst of all, i'm newbie at javascript/jquery, i found several examples on stackoverflow for hiding column on html table, this is what i need:
hide table columns automatically by checking a checkbox with jQuery
it works on jsfiddle:
http://jsfiddle.net/highwayoflife/8BahZ/4/

But i have no idea, what am i doing wrong, why it's not working for me when i had put it together: 

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

Any help is appreciated: please try to explain it as simple as it is possible, like i wrote. Thanks in advance!

Was it helpful?

Solution

You need to wrap your code in a $(document).ready block, or else move it to the bottom of the page, since those checkboxes don't exist yet:

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

in jsFiddle, the second dropdown in the upper-left corner is usually set to "onLoad", which triggers this behavior automatically.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top