我有一张桌子:
<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')
})
})
而且,在可见的时候......
我知道很复杂,我尝试了几种选择但没有成功。非常感谢有人能帮我解决这个问题。
干杯, 卢卡
答案 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;。 虽然有一些样式问题需要修复,但请尝试以下方法:
$(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;