我尝试首先仅显示页面加载时的第一个tbody(在带有thead和多个tbody分组的表中),然后根据使用jQuery的下拉选择中的更改显示其余的tbody
这是代码示例。
//here is the custom JS we would like to add
$("#choice").change(function() {
$("#table tbody tr").hide();
$("#table tbody tr." + $(this).val()).show('fast');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="choice">
<option>Choose...</option>
<option value="1Year">1 Year</option>
<option value="1.25Years">1 Year 3 Months</option>
<option value="1.5Years">1 Year 6 Months</option>
<option value="2Years">2 Years</option>
</select>
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody id="1Year">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tbody id="1.25Years">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tbody id="1.5Years">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
我想显示计算器内容的前六个月,并为用户提供一个选择,以便他们在下拉菜单中选择该选项后可以显示表(计算器)其余内容的几年。
请协助。
最佳答案
首先按照您说的去做-隐藏tbody而不是trs
然后确保ID中没有特殊字符,并且以字母或下划线开头-使用jQuery使您的生活更轻松
由于ID需要唯一,因此您可以直接访问它们
您确实需要在桌子上有一个ID才能做#table tbody
同时给选择空白值
我将选择添加到1年,以便能够在加载时触发更改以处理“仅显示页面加载时的第一个tbody”
我还在表中添加了t2Years
//here is the custom JS we would like to add
$("#choice").on("change",function() {
$("#table>tbody").hide();
if (this.value) $("#t" + this.value).show('fast');
}).change();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="choice">
<option value="">Choose...</option>
<option selected value="1Year">1 Year</option>
<option value="1_25Years">1 Year 3 Months</option>
<option value="1_5Years">1 Year 6 Months</option>
<option value="2Years">2 Years</option>
</select>
<table id="table">
<thead>
<tr>
<th>Table header</th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody id="t1Year">
<tr>
<td>1 year</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tbody id="t1_25Years">
<tr>
<td>1.25</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tbody id="t1_5Years">
<tr>
<td>1.5</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tbody id="t2Years">
<tr>
<td>2</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>