堆棧內存溢出
  簡體   English   中英

合並Jquery手風琴內容

[英]Merge Jquery accordion content

 原文  2016-06-22 13:49:53  7   1    javascript/ jquery/ html5/ jquery-ui

問題描述

我有以下動態創建的手風琴： 

<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代碼是什么？

謝謝。

1 個解決方案

解決方案1
 0  2016-06-22 19:30:57

這是將內容（來自div#Test2表頭）合並到div#Test1內部的表中的代碼。 這是一個相當輕松的提升，我們可以使用特定的選擇器來定位DOM元素。 我們使用控制台來確定我們瞄准的是正確的事物，並監視前后效果。

此處使用的jQuery方法/文檔為：

.each()進行迭代。

.appendTo()以在迭代中選擇當前DOM，並將其插入目標元素（在本例中為表格行）的最后一項之后 。

.hide()隱藏DOM元素。

jQuery小提琴 

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方法隱藏清空的表。 

 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); 
 div#Test2 { display: none; } 
 <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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 手風琴+附加內容Jquery Jquery 手風琴內容點擊事件 jQuery手風琴在單擊時不顯示內容 單擊手風琴時 JQuery 手風琴內容的偏移量 header jQuery手風琴heighstyle：內容或填充不起作用 來自PHP的jQuery EasyUI手風琴內容 內容加載后如何調整jQuery手風琴的大小？ jQuery手風琴無法使用Javascript創建的內容 jQuery手風琴內容鏈接不起作用 動態向jQuery手風琴部分添加內容
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM