Sigmond Gatt Sigmond Gatt - 3 months ago 28
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">
<thead>
<tr>
<th>Country</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>

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


this is the second row:

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


And this is the jquery if made :

<script>
$("#change").change(function(){
$("#tablecountry tr.row2").toggle(!this.checked);
});
</script>


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


</div>
</div>


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

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

$("#change").change(function(){
        $("#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.

$("#change").change();

Fiddle

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