CODEWITHSUNDEEP
javascriptphpjqueryhtml-tableshow-hide
Life of Madness
Life of Madness

Reputation: 844

Hiding table rows when clicking on table headers

I'm trying to get my rows to hide when I press the table header, but the code I use doesn't seem to work.

Here is the script: (jQuery)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){

        var rows = $('Game tr');

        $("Game th").click(function(){
            alert("Clicked");
            rows.hide(1000);
        });

    });
</script>

and the table part:

    $results = mysql_query("SELECT * FROM game WHERE summonerId='$ID' ORDER BY TimeId DESC");

    echo "<table id='Game'>";
    echo "<tr> <th> CLICK HERE </th> </tr>";
    while($row = mysql_fetch_array($results))
    {
        echo "<tr> <td>";
        echo $row['TimeId'];
        echo "</td> </tr>";

    }
    echo "</table>";

I have no idea why this doesn't work.

Upvotes: 0

Views: 823

Answers (4)

mplungjan
mplungjan

Reputation: 178109

You want to add a # to the ID selector:

$(function(){
   var $rows = $('#Game tr');
   $("#Game th").on("click",function(){
    alert("Clicked");
    $rows.hide(1000);
  });
});

If you want to keep the THs visible, you may want to use

var $rows = $('#Game tr:not(":has(th)")');

Upvotes: 2

gaurav5430
gaurav5430

Reputation: 13902

when you need to access any element using its id in jquery, you have to do it using #

change

<script>
    $(document).ready(function(){

        var rows = $('Game tr');

        $("Game th").click(function(){
            alert("Clicked");
            rows.hide(1000);
        });

    });
</script>

to

<script>
    $(document).ready(function(){

        var rows = $('#Game tr');

        $("#Game th").click(function(){
            alert("Clicked");
            rows.hide(1000);
        });

    });
</script>

Upvotes: 0

gregjer
gregjer

Reputation: 2843

You forgot # in your selectors

$(document).ready(function(){

    var rows = $('#Game tr');

    $("#Game th").click(function(){
        alert("Clicked");
        rows.hide(1000);
    });

});

Upvotes: 0

PA.
PA.

Reputation: 29339

In the jquery selector, you need to specify the table by ID, prepending # to it.

try 

var rows = $('#Game tr');
$("#Game th").click(function(){

Upvotes: 0

Related Questions