SHOW / HIDE表行

时间:2016-08-08 07:13:17

标签: jquery

我有User Interface

现在我需要那一行是" HELLO"首先需要隐藏,当用户选中行时," HELLO"将会出现,其他地方是" Comino和dropdownlists"将隐藏。

我尝试了这段代码并且第一行隐藏但我不知道如何隐藏第二行并在选中复选框时显示它

这是第一行(并非所有代码都在这里因为它很长):

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

这是第二行:

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

这是jquery如果制作:

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

和复选框名称:

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

有人可以帮助切换这两行。我需要一次只显示一行。如果选中复选框,我需要显示第二行,如果现在显示了checkox,我需要显示第一行。

1 个答案:

答案 0 :(得分:0)

您可以使用反向条件this.checked切换隐藏和显示另一行,使更改功能如下所示:

$("#change").change(function(){
        $("#tablecountry tr.row2").toggle(!this.checked);
        $("#tablecountry tr.rowhidden").toggle(this.checked);
});
  

“HELLO”需要先隐藏

为此,您可以在脚本中触发更改事件。因此,第一次运行时,将执行更改事件。

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

Fiddle

Fiddle2 - 小提琴和2个按钮,1个仅显示第一行,另一个仅显示第二行

相关问题