文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >合并Jquery折叠内容

问合并Jquery折叠内容
EN

Stack Overflow用户
提问于 2016-06-22 21:49:54
回答 1查看 136关注 0票数 0

我有以下动态创建的手风琴：

代码语言：javascript
复制
<div id="accordion" class="emitters head wrapper ui-accordion ui-widget ui-helper-reset ui-sortable" role="tablist">
<div id="Test1">                    
    <h3 class="accordion-header3 accordion-content-active ui-accordion-header ui-state-default ui-accordion-header-active ui-state-active ui-corner-top ui-accordion-icons" role="tab" id="ui-id-1" aria-controls="ui-id-2" aria-selected="true" aria-expanded="true" tabindex="0"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span><a class="accordion-expand-all" href="#">
    </a>Name: Test2</h3>                    
        <table class="table-text table-collapse ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="width: 100%; padding: 0px; margin: 0px; font-size: 13px; color: blue; display: table; height: 17px; background-color: rgba(189, 197, 205, 0.45098);" id="ui-id-2" aria-labelledby="ui-id-1" role="tabpanel" aria-hidden="false">                    <tbody><tr>                     <th class="table-text" style="width: 71px">ATF</th>                     
        <th class="table-text" style="width: 73px">1.1</th>                     
        <th class="table-text" style="width: 107px">2.2</th>                    
        <th class="table-text" style="width: 223px">7.53</th>                   
        <th class="table-text" style="width: 197px">16:37:31</th>                   
        <th class="table-text" style="width: 80px">37.8715</th>                     
        <th class="table-text" style="width: 78px">60.8957</th>          
        <th class="table-text" style="width: 202px">21</th>          
        <th class="table-text" style="width: 180px">ACTIVE</th>          
        <th class="table-text" style="width: 145px">35.34</th>       
        <th class="table-text" style="width: 192px">0</th>       
        <th class="table-text" style="width: 125px">27793</th>       
        <th class="table-text" style="width: 136px">0.1</th>         
        <th class="table-text" style="width: 90px">35</th>       
        </tr>        
        </tbody></table>         
        </div>
<div id="Test2">                    
    <h3 class="accordion-header3 accordion-content-active ui-accordion-header ui-state-default ui-corner-all ui-accordion-icons" role="tab" id="ui-id-3" aria-controls="ui-id-4" aria-selected="false" aria-expanded="false" tabindex="-1">
    <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e">
    </span><a class="accordion-expand-all" href="#"></a>Name: Test2</h3>                    
        <table class="table-text table-collapse ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="width: 100%; padding: 0px; margin: 0px; font-size: 13px; color: darkgreen; display: none; height: 17px; background-color: rgba(189, 197, 205, 0.45098);" id="ui-id-4" aria-labelledby="ui-id-3" role="tabpanel" aria-hidden="true">                     
            <tbody>
                <tr>                    
                    <th class="table-text" style="width: 71px">11</th>                  
                    <th class="table-text" style="width: 73px">11</th>                  
                    <th class="table-text" style="width: 107px">11</th>                     
                    <th class="table-text" style="width: 223px">2.78</th>                   
                    <th class="table-text" style="width: 197px">16:37:31</th>                   
                    <th class="table-text" style="width: 80px">-108.6117</th>                   
                    <th class="table-text" style="width: 78px">46.6017</th>          
                    <th class="table-text" style="width: 202px">CDF</th>         
                    <th class="table-text" style="width: 180px">ACTIVE</th>          
                    <th class="table-text" style="width: 145px">11</th>          
                    <th class="table-text" style="width: 192px">0</th>       
                    <th class="table-text" style="width: 125px">11</th>          
                    <th class="table-text" style="width: 136px">0.1</th>         
                    <th class="table-text" style="width: 90px">11</th>       
                </tr>        
            </tbody>
        </table>         
    </div>
</div>

​

我需要在一个标题下实时合并他们的内部表。合并折叠内容的javascript代码是什么？

谢谢。

javascript
jquery
html
jquery-ui
EN

回答 1

Stack Overflow用户

发布于 2016-06-23 03:30:57

下面的代码将把内容(来自div#Test2的表头)合并到div#Test1中的表中。这是一个相当轻量级的提升，我们使用特定的选择器来定位DOM元素。我们使用控制台来确保我们的目标是正确的，以及监控前后的效果。

这里使用的jQuery方法/文档是：

迭代的.each()。

.appendTo()在迭代中选择当前DOM，并将其插入到目标元素(在本例中是一个表行)中的最后一项之后()。

隐藏DOM元素的.hide()。

jQuery Fiddle

代码语言：javascript
复制
var targetFocus = $('div#Test2').find('th');
console.log('Second TH Count: ' + targetFocus.length); //Initial Test 2 table header

targetFocus.each(function() {
  var $container = $('div#Test1').find('table:eq(0) tbody tr');
  $(this).appendTo($container);
  console.log($container.length);
});

targetFocus = $('div#Test1').find('th');
console.log('First TH Count: ' + targetFocus.length);

if ($('div#Test2').find('th').length === 0) {
  $('div#Test2').hide();
}

最后，一旦我们确定合并是成功的，我们就可以用.hide() jQuery方法隐藏空出的表。

​

代码语言：javascript
复制
var targetFocus = $('div#Test2').find('th');
console.log('Second TH Count: ' + targetFocus.length); //Initial Test 2 table header

targetFocus.each(function(i) {
  var $container = $('div#Test1').find('table:eq(0) tbody tr');
  $(this).appendTo($container);
  console.log($container.length);
});

targetFocus = $('div#Test1').find('th');
console.log('First TH Count: ' + targetFocus.length);
代码语言：javascript
复制
div#Test2 {
  display: none;
}
代码语言：javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="accordion" class="emitters head wrapper ui-accordion ui-widget ui-helper-reset ui-sortable" role="tablist">
  <div id="Test1">
    <h3 class="accordion-header3 accordion-content-active ui-accordion-header ui-state-default ui-accordion-header-active ui-state-active ui-corner-top ui-accordion-icons" role="tab" id="ui-id-1" aria-controls="ui-id-2" aria-selected="true" aria-expanded="true"
    tabindex="0"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span><a class="accordion-expand-all" href="#">
</a>Name: Test2</h3>
    <table class="table-text table-collapse ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="width: 100%; padding: 0px; margin: 0px; font-size: 13px; color: blue; display: table; height: 17px; background-color: rgba(189, 197, 205, 0.45098);"
    id="ui-id-2" aria-labelledby="ui-id-1" role="tabpanel" aria-hidden="false">
      <tbody>
        <tr>
          <th class="table-text" style="width: 71px">ATF</th>
          <th class="table-text" style="width: 73px">1.1</th>
          <th class="table-text" style="width: 107px">2.2</th>
          <th class="table-text" style="width: 223px">7.53</th>
          <th class="table-text" style="width: 197px">16:37:31</th>
          <th class="table-text" style="width: 80px">37.8715</th>
          <th class="table-text" style="width: 78px">60.8957</th>
          <th class="table-text" style="width: 202px">21</th>
          <th class="table-text" style="width: 180px">ACTIVE</th>
          <th class="table-text" style="width: 145px">35.34</th>
          <th class="table-text" style="width: 192px">0</th>
          <th class="table-text" style="width: 125px">27793</th>
          <th class="table-text" style="width: 136px">0.1</th>
          <th class="table-text" style="width: 90px">35</th>
        </tr>
      </tbody>
    </table>
  </div>

  <div id="Test2">
    <h3 class="accordion-header3 accordion-content-active ui-accordion-header ui-state-default ui-corner-all ui-accordion-icons" role="tab" id="ui-id-3" aria-controls="ui-id-4" aria-selected="false" aria-expanded="false" tabindex="-1">
<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e">
</span><a class="accordion-expand-all" href="#"></a>Name: Test2</h3>
    <table class="table-text table-collapse ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="width: 100%; padding: 0px; margin: 0px; font-size: 13px; color: darkgreen; display: none; height: 17px; background-color: rgba(189, 197, 205, 0.45098);"
    id="ui-id-4" aria-labelledby="ui-id-3" role="tabpanel" aria-hidden="true">
      <tbody>
        <tr>
          <th class="table-text" style="width: 71px">11</th>
          <th class="table-text" style="width: 73px">11</th>
          <th class="table-text" style="width: 107px">11</th>
          <th class="table-text" style="width: 223px">2.78</th>
          <th class="table-text" style="width: 197px">16:37:31</th>
          <th class="table-text" style="width: 80px">-108.6117</th>
          <th class="table-text" style="width: 78px">46.6017</th>
          <th class="table-text" style="width: 202px">CDF</th>
          <th class="table-text" style="width: 180px">ACTIVE</th>
          <th class="table-text" style="width: 145px">11</th>
          <th class="table-text" style="width: 192px">0</th>
          <th class="table-text" style="width: 125px">11</th>
          <th class="table-text" style="width: 136px">0.1</th>
          <th class="table-text" style="width: 90px">11</th>
        </tr>
      </tbody>
    </table>
  </div>
</div>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/37970076

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档