Question

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

我想显示计算器内容的前六个月，并在用户选择下拉菜单中的选项时让用户选择显示表（计算器）其余部分的内容几年。

请协助。

Answer 1

按照您说的去做-隐藏tbody而不是trs
然后确保ID中没有特殊字符，并以字母或下划线开头-使用jQuery可以简化您的生活
由于ID需要唯一，因此您可以直接访问它们
您也需要在桌子上有一个ID才能做#table tbody
还提供“选择空白”值
我将所选内容添加到1年，以便能够在加载时触发更改以处理“ 仅显示页面加载时的第一个正文”
我还在表中添加了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>

Answer 2

---------已删除（这都是错误的：P）------

ID或类不能以数字开头。例如1年应更改为Year1。同样，您不能在类或ID中使用.。例如1.25年应更改为1-25年。

------已删除------

注释的注释：现在，在html5中的类和ID的开头允许使用数字。 ID中也可以使用句点，只需确保在CSS中转义该句点即可。例如#1\.25Years

代码的实际问题

您的jquery选择器正在选择一个ID为table而不是table的元素。另外，您正在选择带有所选选项值类别的tr而不是tbody的ID。我已经对其进行了更改，因此选择了表并选择了tbody的ID。

//here is the custom JS we would like to add
$("#choice").change(function() {
  $("table tbody").hide();
  $("table tbody#" + $(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="Year1">1 Year</option>
  <option value="Years1-25">1 Year 3 Months</option>
  <option value="Years1-5">1 Year 6 Months</option>
  <option value="Years2">2 Years</option>
</select>

<table id="table">
  <thead>
    <tr>
      <th>hello</th>
      <th>hello</th>
      <th>hello</th>
      <th>hello</th>
      <th>hello</th>
      <th>hello</th>
      <th>hello</th>
    </tr>
  </thead>

  <tbody id="Year1">
    <tr>
      <td>Year1</td>
      <td>Year1</td>
      <td>Year1</td>
      <td>Year1</td>
      <td>Year1</td>
      <td>Year1</td>
      <td>Year1</td>
    </tr>
    <tr>
      <td>Year1</td>
      <td>Year1</td>
      <td>Year1</td>
      <td>Year1</td>
      <td>Year1</td>
      <td>Year1</td>
      <td>Year1</td>
    </tr>
  </tbody>

  <tbody id="Years1-25">
    <tr>
      <td>Years1-25</td>
      <td>Years1-25</td>
      <td>Years1-25</td>
      <td>Years1-25</td>
      <td>Years1-25</td>
      <td>Years1-25</td>
      <td>Years1-25</td>
    </tr>
    <tr>
      <td>Years1-25</td>
      <td>Years1-25</td>
      <td>Years1-25</td>
      <td>Years1-25</td>
      <td>Years1-25</td>
      <td>Years1-25</td>
      <td>Years1-25</td>
    </tr>
  </tbody>

  <tbody id="Years1-5">
    <tr>
      <td>Years1-5</td>
      <td>Years1-5</td>
      <td>Years1-5</td>
      <td>Years1-5</td>
      <td>Years1-5</td>
      <td>Years1-5</td>
      <td>Years1-5</td>
    </tr>
    <tr>
      <td>Years1-5</td>
      <td>Years1-5</td>
      <td>Years1-5</td>
      <td>Years1-5</td>
      <td>Years1-5</td>
      <td>Years1-5</td>
      <td>Years1-5</td>
    </tr>
  </tbody>
  
  <tbody id="Years2">
    <tr>
      <td>Years2</td>
      <td>Years2</td>
      <td>Years2</td>
      <td>Years2</td>
      <td>Years2</td>
      <td>Years2</td>
      <td>Years2</td>
    </tr>
    <tr>
      <td>Years2</td>
      <td>Years2</td>
      <td>Years2</td>
      <td>Years2</td>
      <td>Years2</td>
      <td>Years2</td>
      <td>Years2</td>
    </tr>
  </tbody>
</table>

Answer 3

我已经解决了上述问题的最终解决方案。用户将具有标题和永久显示的几行数据（在thead下分组）。加载页面后，选定的对象将停留在choose（不显示任何躯干组）上，并且可以通过在顶部的下拉菜单中选择选项来扩展数据。 tbody组将显示在永久行的底部：

非常感谢所有贡献者。

请参见下面的最终代码：

//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();

<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="choice">
  <option selected value="">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 id="table">
  <thead>
    <tr>
      <th>Table header</th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
    <tr>
      <td>Permanent row 1</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Permanent row 2</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </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>
</body>

Answer 4

我研究了anc提出的这些问题。

查看代码：

//here is the custom JS we would like to add
$(document).ready(function(){
   $('tbody').hide();
				  
$("#choice").change(function() {
  $("table>tbody").hide();
  $("table>tbody#" + $(this).val()).show('fast');
});
	});

     <html>		
    	<body>
    		
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <select id="choice">
      <option selected value="">Choose...</option>
      <option value="Year1">1 Year</option>
      <option value="Years1-25">1 Year 3 Months</option>
      <option value="Years1-5">1 Year 6 Months</option>
      <option value="Years2">2 Years</option>
    </select>

    <table id="table">
      <thead>
        <tr>
          <th>hello</th>
          <th>hello</th>
          <th>hello</th>
          <th>hello</th>
          <th>hello</th>
          <th>hello</th>
          <th>hello</th>
        </tr>
    	 <tr>
          <td>Permanentrow1</td>
          <td>Permanentrow1</td>
          <td>Permanentrow1</td>
          <td>Permanentrow1</td>
          <td>Permanentrow1</td>
          <td>Permanentrow1</td>
          <td>Permanentrow1</td>
        </tr> 
    	<tr>
          <td>Permanentrow2</td>
          <td>Permanentrow2</td>
          <td>Permanentrow2</td>
          <td>Permanentrow2</td>
          <td>Permanentrow2</td>
          <td>Permanentrow2</td>
          <td>Permanentrow2</td>
        </tr>   
      </thead>

      <tbody id="Year1">
        <tr>
          <td>Year1</td>
          <td>Year1</td>
          <td>Year1</td>
          <td>Year1</td>
          <td>Year1</td>
          <td>Year1</td>
          <td>Year1</td>
        </tr>
        <tr>
          <td>Year1</td>
          <td>Year1</td>
          <td>Year1</td>
          <td>Year1</td>
          <td>Year1</td>
          <td>Year1</td>
          <td>Year1</td>
        </tr>
      </tbody>

      <tbody id="Years1-25">
        <tr>
          <td>Years1-25</td>
          <td>Years1-25</td>
          <td>Years1-25</td>
          <td>Years1-25</td>
          <td>Years1-25</td>
          <td>Years1-25</td>
          <td>Years1-25</td>
        </tr>
        <tr>
          <td>Years1-25</td>
          <td>Years1-25</td>
          <td>Years1-25</td>
          <td>Years1-25</td>
          <td>Years1-25</td>
          <td>Years1-25</td>
          <td>Years1-25</td>
        </tr>
      </tbody>

      <tbody id="Years1-5">
        <tr>
          <td>Years1-5</td>
          <td>Years1-5</td>
          <td>Years1-5</td>
          <td>Years1-5</td>
          <td>Years1-5</td>
          <td>Years1-5</td>
          <td>Years1-5</td>
        </tr>
        <tr>
          <td>Years1-5</td>
          <td>Years1-5</td>
          <td>Years1-5</td>
          <td>Years1-5</td>
          <td>Years1-5</td>
          <td>Years1-5</td>
          <td>Years1-5</td>
        </tr>
      </tbody>
      
      <tbody id="Years2">
        <tr>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
        </tr>
        <tr>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
        </tr>
        <tr>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
        </tr>
        <tr>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
        </tr>
        <tr>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
        </tr>
        
        
      </tbody>
    </table>

    	
    			</body>	
    			</html>

首先隐藏，然后使用jQuery

4 个答案: