在同一个表中找到下一个tbody并仅隐藏下一个

时间:2017-03-20 15:39:04

标签: javascript jquery checkbox

我有一张桌子:

<table cellpadding="0" cellspacing="0" border="0">
                            <thead>
                                <tr>
                                    <th>Kurs</th>
                                    <th>Datum</th>
                                    <th>Zeit</th>
                                    <th>Ort</th>
                                    <th>Anmeldung</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                    <table cellpadding="0" cellspacing="0" border="0" id="dates">
                        <tbody role="dategroup">
                            <tr class="table-1_2">
                                <td>Grundkurs 1</td>
                                <td>9. Mai 2017</td>
                                <td>08:00 - 12:00</td>
                                <td>Wallisellen</td>
                                <td rowspan="2">
                                    <input type="checkbox" id="gk1_2"> </td>
                            </tr>
                            <tr class="table-1_2">
                                <td>Grundkurs 2</td>
                                <td>10. Mai 2017</td>
                                <td>08:00 - 12:00</td>
                                <td>Wallisellen</td>
                            </tr>
                            <tr class="table-2a">
                                <td>Grundkurs 2a</td>
                                <td>11. Mai 2017</td>
                                <td>08:00 - 12:00</td>
                                <td>Wallisellen</td>
                                <td>
                                    <input type="checkbox" id="gk2a"> </td>
                            </tr>
                            <tr class="table-gk3">
                                <td>Grundkurs 3</td>
                                <td>11. Mai 2017</td>
                                <td>08:00 - 12:00</td>
                                <td>Wallisellen</td>
                                <td>
                                    <input type="checkbox" id="gk3"> </td>
                            </tr>
                        </tbody>
                        <tbody role="dategroup">
                            <tr class="table-1_2">
                                <td>Grundkurs 1</td>
                                <td>9. Juni 2017</td>
                                <td>08:00 - 12:00</td>
                                <td>Wallisellen</td>
                                <td rowspan="2">
                                    <input type="checkbox" id="gk1_2"> </td>
                            </tr>
                            <tr class="table-1_2">
                                <td>Grundkurs 2</td>
                                <td>10. Juni 2017</td>
                                <td>08:00 - 12:00</td>
                                <td>Wallisellen</td>
                            </tr>
                            <tr class="table-2a">
                                <td>Grundkurs 2a</td>
                                <td>11. Juni 2017</td>
                                <td>08:00 - 12:00</td>
                                <td>Wallisellen</td>
                                <td>
                                    <input type="checkbox" id="gk2a"> </td>
                            </tr>
                            <tr class="table-gk3">
                                <td>Grundkurs 3</td>
                                <td>11. Juni 2017</td>
                                <td>08:00 - 12:00</td>
                                <td>Wallisellen</td>
                                <td>
                                    <input type="checkbox" id="gk3"> </td>
                            </tr>
                        </tbody>
                    </table>

当点击tbody中的复选框时,所有其他tbody都应该消失,当取消选中时,它们应该再次可见。

我尝试了以下jquery,但没有结果:

$(document).ready(function () {
     $("input[type=checkbox]").on('click', function () {
     $(this).next('table').find('tbody').addClass('hide')
     })
})

而且,在可见的时候......

  1. ...复选框&#34; gk1_2&#34;行&#34;表-2a&#34;应该消失
  2. ...复选框&#34; gk2a&#34;检查,行&#34; table-1 _&#34;应该消失和复选框&#34; gk3&#34;应该强制检查。 (3)
  3. ...复选框&#34; gk3&#34;检查无需采取任何措施。
  4. 我知道很复杂,我尝试了几种选择但没有成功。非常感谢有人能帮我解决这个问题。

    干杯, 卢卡

2 个答案:

答案 0 :(得分:0)

选择以下两行之一:

$("input[type=checkbox]").on('click', function () {
    $(this).closest('tbody').nextAll('tbody').addClass('hide'); // Add 'hide' class to all _following_  tbody
    $('tbody').not($(this).closest('tbody')).addClass('hide'); // Add 'hide' class to ALL other tbody elements
})

答案 1 :(得分:0)

解决方案---&#34;当点击tbody中的复选框时,所有其他tbody应该消失,当取消选中时,它们应该再次可见&#34;。 虽然有一些样式问题需要修复,但请尝试以下方法:

&#13;
&#13;
$(document).ready(function () {
     $("input[type=checkbox]").on('click', function () {
      var tbodys = $('tbody');
      for(var i = 0; i<tbodys.length; i++){
        if(!$(this).closest('tbody').is($(tbodys[i]))){
          if((tbodys[i]).className != 'hide'){
            $(tbodys[i]).removeClass('show');
          $(tbodys[i]).addClass('hide');
        }
        else{
          $(tbodys[i]).removeClass('hide');
          $(tbodys[i]).addClass('show');
        }
        }
      }
     });
});
&#13;
.hide{
  display: none;
}
.show{
  display: block;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellpadding="0" cellspacing="0" border="0">
  <thead>
      <tr>
          <th>Kurs</th>
          <th>Datum</th>
          <th>Zeit</th>
          <th>Ort</th>
          <th>Anmeldung</th>
      </tr>
  </thead>
</table>
<table cellpadding="0" cellspacing="0" border="0" id="dates">
  <tbody role="dategroup">
      <tr class="table-1_2">
          <td>Grundkurs 1</td>
          <td>9. Mai 2017</td>
          <td>08:00 - 12:00</td>
          <td>Wallisellen</td>
          <td rowspan="2">
              <input type="checkbox" id="gk1_2"> </td>
      </tr>
      <tr class="table-1_2">
          <td>Grundkurs 2</td>
          <td>10. Mai 2017</td>
          <td>08:00 - 12:00</td>
          <td>Wallisellen</td>
      </tr>
      <tr class="table-2a">
          <td>Grundkurs 2a</td>
          <td>11. Mai 2017</td>
          <td>08:00 - 12:00</td>
          <td>Wallisellen</td>
          <td>
              <input type="checkbox" id="gk2a"> </td>
      </tr>
      <tr class="table-gk3">
          <td>Grundkurs 3</td>
          <td>11. Mai 2017</td>
          <td>08:00 - 12:00</td>
          <td>Wallisellen</td>
          <td>
              <input type="checkbox" id="gk3"> </td>
      </tr>
  </tbody>
  <tbody role="dategroup">
      <tr class="table-1_2">
          <td>Grundkurs 1</td>
          <td>9. Juni 2017</td>
          <td>08:00 - 12:00</td>
          <td>Wallisellen</td>
          <td rowspan="2">
              <input type="checkbox" id="gk1_2"> </td>
      </tr>
      <tr class="table-1_2">
          <td>Grundkurs 2</td>
          <td>10. Juni 2017</td>
          <td>08:00 - 12:00</td>
          <td>Wallisellen</td>
      </tr>
      <tr class="table-2a">
          <td>Grundkurs 2a</td>
          <td>11. Juni 2017</td>
          <td>08:00 - 12:00</td>
          <td>Wallisellen</td>
          <td>
              <input type="checkbox" id="gk2a"> </td>
      </tr>
      <tr class="table-gk3">
          <td>Grundkurs 3</td>
          <td>11. Juni 2017</td>
          <td>08:00 - 12:00</td>
          <td>Wallisellen</td>
          <td>
              <input type="checkbox" id="gk3"> </td>
      </tr>
  </tbody>
</table>
&#13;
&#13;
&#13;