Question

我试图首先仅显示thead和页面加载时的几行数据（永久显示分组在thead下的数据）。加载页面后，我希望选定的对象继续选择（不显示任何躯干组），并通过在顶部的下拉菜单中选择选项，为用户提供扩展数据范围的选项（以显示选定的躯干）。 Tbody组将显示在永久行的底部。这段代码不会在页面加载时隐藏tbody，但会执行我希望它执行的其余工作。

请参阅我之前的问题link

请协助。

这是代码示例。

//here is the custom JS we would like to add
$("#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>
  </tbody>
</table>

	
			</body>	
			</html>

Answer 1

嗨，我已经做了一些研究，并提出了解决方案。

参见下文：

//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>

Answer 2

只需将display: none添加到您的<tbody>

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

table tbody {
  display: none
}

<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>
  </tbody>
</table>

	
			</body>	
			</html>

编辑：修复更改功能

在页面加载时隐藏正文，永久显示thead组，在使用jQuery选择下拉菜单时正文

2 个答案: