我试图首先在页面加载时仅显示第一个 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
同时给 Choose a blank 值
我将 selected 添加到 1year 以便能够在加载时触发更改以处理“在页面加载时仅显示第一个 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>
关于javascript - 首先隐藏然后使用 jQuery 根据下拉选择显示多个 tbody 组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57040950/