jquery - SHOW/HIDE table rows -
i have user interface
now need row "hello" need hidden @ first , when user check checkbox row "hello" shown , other "comino , dropdownlists" hide.
i tried code , first row hiding dont know hide second row , show when checkbox checked
this fist row(not code here becuase 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 second row:
<tr type="hidden" id="rowhidden" class="rowhidden"> <td >hello</td> </tr> </table>
and jquery if made :
<script> $("#change").change(function(){ $("#tablecountry tr.row2").toggle(!this.checked); }); </script>
and 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 countries </div> </div>
someone can switch these 2 rows. need show 1 row @ time. if checkbox checked need show second row , if checkox shown need show first row.
you toggle hiding , showing of other row using inverse condition this.checked
, making change function like:
$("#change").change(function(){ $("#tablecountry tr.row2").toggle(!this.checked); $("#tablecountry tr.rowhidden").toggle(this.checked); });
"hello" need hidden @ first
for trigger change event in script. first time run, change event executed.
$("#change").change();
fiddle2 - above fiddle , 2 buttons, 1 showing first row, showing second row
Comments
Post a Comment