javascript - 在页面加载时隐藏 tbody，永久显示 thead 组，使用 jQuery 在下拉选择中显示 tbody-6ren

javascript - 在页面加载时隐藏 tbody，永久显示 thead 组，使用 jQuery 在下拉选择中显示 tbody

转载作者：行者123 更新时间：2023-11-30 13:57:05

我试图首先在页面加载时仅显示 thead 和几行数据(永久显示分组在 thead 下的数据)。加载页面后，我希望选定的对象选择(不显示任何 tbody 组)并通过选择顶部下拉菜单中的选项(以显示选定的 tbody)为用户提供扩展数据的选项。 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>

最佳答案

您好，我做了一些研究并提出了解决方案。

见下文:

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

关于javascript - 在页面加载时隐藏 tbody，永久显示 thead 组，使用 jQuery 在下拉选择中显示 tbody，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57053052/

文章推荐： javascript - 无法读取javascript中数组元素的属性

文章推荐： javascript - React - 从 render() 调用异步函数

文章推荐： javascript - 在 div 及其按钮外单击时关闭 div

文章推荐： javascript - Highcharter plot 仅在第二次点击后更新 - R Shiny

python - 抓取表仅返回 "tbody"而不是 tbody 的内容
我正在尝试从该网站上名为“燃料混合图”的表中提取数据:https://www.iso-ne.com/isoexpress/我正在使用 BeautifulSoup 读取 HTML 并提取下面列出的表格，
html - 在 tbody 上没有固定高度的动态 tbody 滚动
我一直在为这个问题伤脑筋。我有一个 div 布局，其中某些 div 可以折叠或显示。在这些 div 下方是一个带有表格的 div。我想要的是当内容不再适合页面时，tbody 变得可滚动。我不能给 t
css - 在具有多个 tbody 的表中如何在 tbody 元素之间创建一些空间
我试图在包含多个 tbody 元素的表的 tbody 部分之间创建一些空间，即间隙，但没有取得任何成功。怎么做到的？ .
html - 一个 tbody 可以在另一个 tbody 里面吗？
是否可以像这样在外部 tbody 中有一个内部 tbody: 这是一个示例 CSS: .class1 {background-color:#ff0000;} .class2 {b
JavaScript - 添加行在 tbody 标签后添加行，需要在 tbody 内添加
我在 JavaScript 中添加行时遇到问题。一切正常，但在 tbody 标签之后添加了行。我需要在 tbody 中添加。片段: function deleteRow(row) { var i
javascript - 如何在表的多个 tbody 中使用 jquery 删除选定的 tbody
我有一个表，并使用 jquery 在我的表中添加了更多 tbody。现在我想在单击删除按钮时删除选定的 tbody，我的代码删除一行而不是删除所有选定的 tbody。怎么办？我的代码是:
html - 当 tbody 设置为其容器的宽度时，我可以在 tbody 的溢出上实现水平滚动吗？
我正在努力实现以下目标: 包含 div 内的 table 元素 table 没有设置width(可以是 100%)，但它不能比包含的 div 宽 table 的单元格是固定宽度的(使用 width 和
html - 垂直滚动在 tbody 中无法正常工作，打破了之前的 tbody 宽度
我有一个表格，我需要在 tbody 中添加一个垂直滚动条。我看过一些代码但不适合我或者我不理解。我也不太擅长CSS。我添加了一个 div 并将我的 tbody 放在那里。它适用于滚动，但 tbody
html - 使用 tbody 的新 css 在表中创建可滚动的 tbody
我有一个带有滚动 tbody 的工作表，通过使用带有以下内容的 css。 tbody{ overflow:auto; } thread > tr, tbody{ display:block;
html - 为什么 tbody 之间的 div 在渲染时自动移出 tbody？
这是我的代码: test 运行上面的代码后，自动变成了这样: test
css - tbody td 边框不随 tbody 中的内容滚动溢出 :auto;
当我滚动浏览这个 overflow:auto; 时，我无法让这些 td 的边框跟随它们的行； .关于修复的任何想法？注意:设置 table-layout:fixed 或使行 display:blo
javascript - 如何使 tbody 子级大小与 thead 之后创建的第一个 tbody 大小相同
嗨，我有一个问题。我想问一下如何让tbody子元素的大小与thead后第一行的大小相同？这是我的代码..请帮助我..您可以编辑我的 fiddle 或给出答案 var theadFlag =
jquery - 选择的 tbody 不使用 jquery 从多个 tbody 中删除
我知道这是一个非常简单的查询，但我花了一整天时间让它工作，但运气不好。我正在尝试删除任何带有其 ID 的 tbody，但它不是通过我在网上找到的任何方法删除的。我在这里犯了什么错误？ $(do
javascript - 在滚动 tbody 和 thead 列时修复表头与 tbody 列对齐
这是固定外部高度的表格，我需要滚动开始时，thead 将被固定，tbody 将滚动显示每列的标题。是否有任何想法将表格的标题固定在顶部和表格的内部内容将滚动。 .max_height{max-heig
jquery 说 tbody.length = 1 即使没有标签存在
这个问题在这里已经有了答案: Why do browsers insert tbody element into table elements? (2 个答案) 关闭 9 年前。我有一个非常简单的
haskell - xml-conduit:如何仅获取第一个 tbody 和该 tbody 的直接子 tr？
我正在使用 xml-conduit 和 Text.XML.Cursor 来导航一些带有嵌套表的糟糕 html。有一个带有两个 tbody 标签的表，我想要第一个 tbody 的直接子 tr 标签。这是
javascript - DataTable.js - 对于通过 Ajax 调用传入的某些数据集，内不会显示任何数据
对于某些数据集，数据表中不显示任何数据 - 仅显示列标题或列标签。即使页面上的代码没有更改，也会发生这种情况。有问题的数据在浏览器开发工具 Console.logs 中正确显示。如下所示，DataS
javascript - 如何使用 Javascript/Jquery 将 Child 追加为 tbody 中的第一行并拥有自己的 tbody
我需要将 json 中的数据作为表中的行追加。我需要将 id="project"的行添加为自己的 tbody 中的第一行。如果检测到新项目，将创建新的 tbody，并且项目和任务将拥有自己的 tbod
javascript - 在页面加载时隐藏 tbody，永久显示 thead 组，使用 jQuery 在下拉选择中显示 tbody
我试图首先在页面加载时仅显示 thead 和几行数据(永久显示分组在 thead 下的数据)。加载页面后，我希望选定的对象选择(不显示任何 tbody 组)并通过选择顶部下拉菜单中的选项(以显示选定的
css - 将 thead 和 tbody 元素与固定 thead 和使 tbody 可滚动的能力对齐
我已将以下 CSS 应用于我的表格。 thead, tbody { display: block; } tbody { height: 200px; overflo

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 在页面加载时隐藏 tbody，永久显示 thead 组，使用 jQuery 在下拉选择中显示 tbody