我尝试首先仅显示页面加载时的第一个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>

07-24 09:50
查看更多