Sigmond Gatt Sigmond Gatt - 1 year ago 105
jQuery Question

SHOW/HIDE table rows

i have this User Interface

Now i Need that row where is "HELLO" need to be hidden at first and when the user check the checkbox the row "HELLO" will be shown and the other where are "Comino and dropdownlists" will be hide.

I tried this code and the first row is hiding but i dont know what to do to hide the second row and show it when checkbox is checked

This is the fist row(not all the code is here becuase it is quite long):

<table class="table table-striped" id="tablecountry">

<tr class="row2">
<td><?php echo $_SESSION['country']?></td>

this is the second row:

<tr type="hidden" id="rowhidden" class="rowhidden">
<td >Hello</td>

And this is the jquery if made :

$("#tablecountry tr.row2").toggle(!this.checked);

and the checkbox name :

<div class="form-group">
<div class="col-md-2 col-md-offset-3">
<input type="checkbox" name="change" id="change" value="0" > Change All Countries


Someone can help to switch by these 2 rows. I need to show only 1 row at a time. If checkbox is checked i need to show the second row and if checkox is now shown i need to show the first row.

Answer Source

You could toggle hiding and showing of the other row by using the inverse condition this.checked, making the change function look like:

        $("#tablecountry tr.row2").toggle(!this.checked);
        $("#tablecountry tr.rowhidden").toggle(this.checked);

"HELLO" need to be hidden at first

For this you could trigger the change event in the script. So the first time it is run, the change event is executed.



Fiddle2 - Above fiddle and also 2 buttons, 1 for showing only first row, another for showing only the second row

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download