首先隐藏，然后使用 jQuery 根据下拉选择显示多个正文组

我试图首先在页面加载时仅显示第一个正文(在具有 thead 和多个 tbody 分组的表中(，然后使用 jQuery 根据下拉选择中的更改显示正文的其余部分

下面是代码的示例。

//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 正文
同时给出"选择空白"值
我将选择添加到 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>

--------- 已编辑(这都是错误的:P( ------

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

------已编辑------

编文说明：现在允许在 html5 中的类和 ID 开头使用数字。ID 中也允许使用句点，只需确保在 CSS 中转义句点即可。例如 #1.25Years

代码的实际问题

您的 jquery 选择器选择了一个 id 为 table 的元素，而不是表。此外，您还选择了一个具有所选选项值的类而不是 tbody 的 id的 tr。我已经更改了它，因此选择了表并选择了 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>

我已经找到了上述问题的最终解决方案。用户将有一个标题和几行永久显示的数据(分组在 thead 下(。加载页面后，所选内容将选择(不显示任何正文组(，并可以选择通过在顶部下拉菜单中选择选项来扩展数据。正文组将显示在永久行的底部：

非常感谢所有做出贡献的人。

请参阅下面的最终代码：

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

我研究过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>

相关内容

最新更新

热门标签：