2017-12-13 66 views
6

Tablo altbilgi satırının her bir etiketini kaydırma div'in alt kısmına taşımak zorunda olduğum bir senaryo var. İşte plnkr.Tablo altbilgisini dinamik bir şekilde kaydırma satırının altına sürükleyin jquery

Ben

$('.sticky-table').find("table tfoot tr.sticky-row th").css('top', 260); 

tarafından eklenmiştir taşıyabilirsiniz ama 260 hesaplamak istiyoruz ve bunu. Yardıma ihtiyacım var.

+0

hesaplayın Ne amaçla? Kaç tane satır olduğuna bağlı olarak, tabana geçmek için gereken mesafeyi hesaplamak mı istiyorsunuz? – zer00ne

+0

Üstten mesafeyi tanımlamak yerine, alttan olan mesafeyi '.css ('bottom', 0);'? – Adriano

+0

Bunu çözmek için jQuery'yi kullanmaya gerek yoktur. Birkaç basit CSS çizgisi gerekli. Bu yöntemi gösteren bir çözüm sağladım. –

cevap

5

Tüm kabın alt konumunu hesaplamanız ve altbilgi başlığının yüksekliğini ve yatay kaydırma çubuğunu çıkartmanız gerekir. Bu, altbilgi satırı th öğelerinin üst konumunu alır.

$('.sticky-table.sticky-headers').offset().top //top of the container 
+ $('.sticky-table.sticky-headers').outerHeight() //height of the container (adding it with top gives you the bottom position of the container) 
- $('.sticky-table').find("table tfoot tr.sticky-row th").outerHeight(true) //height of the footer headers 
- 11 //Fixed height of the scrollbar 

güncellenmiş plunker düzenlendi.

+0

Teşekkürler. Sabit üstbilgi, sütun ve altbilgi tablosu oluşturmak için bu kodla hedefime ulaşırım. –

2

Bu, birkaç basit CSS satırı ile sağlanabilir. Bu, jQuery'deki yüksekliklere ve konumlara göre karmaşık hesaplamalar yapma ihtiyacını ortadan kaldırır ve gerekirse, yanıt verme konusunda ek yarar sağlar.

Amaç, tfoot öğesinin .sticky-table öğesinin altına kesinlikle yerleştirilmesidir.

Bunu yapmak için .sticky-table ürününü position: relative; ve tfoot a position: absolute; bottom: 0; verebiliriz. Bunun gibi

.sticky-table { 
    /* ...existing styles */ 
    position: relative; 
} 

.sticky-table tfoot { 
    position: absolute; 
    bottom: 0; 
}  

:

/* Styles go here */ 
 

 
.sticky-table { 
 
    position: relative; 
 
    max-width: 100%; 
 
    max-height: 500px; 
 
    height: 500px; 
 
    overflow: auto; 
 
    border-top: 1px solid #ddd; 
 
    border-bottom: 1px solid #ddd; 
 
    padding: 0 !important; 
 
} 
 

 
.sticky-table table { 
 
    margin-bottom: 0; 
 
    width: 100%; 
 
    max-width: 100%; 
 
    border-spacing: 0; 
 
} 
 

 
.sticky-table table tr.sticky-row th, 
 
.sticky-table table tr.sticky-row td { 
 
    background-color: #fff; 
 
    border-top: 0; 
 
    position: relative; 
 
    outline: 1px solid #ddd; 
 
    z-index: 5; 
 
} 
 

 
.sticky-table table td.sticky-cell, 
 
.sticky-table table th.sticky-cell { 
 
    background-color: #fff; 
 
    outline: 1px solid #ddd; 
 
    position: relative; 
 
    z-index: 10; 
 
} 
 

 
.sticky-table table tr.sticky-row td.sticky-cell, 
 
.sticky-table table tr.sticky-row th.sticky-cell { 
 
    z-index: 15; 
 
} 
 

 
.sticky-table tfoot { 
 
    position: absolute; 
 
    bottom: 0; 
 
} 
 

 
.sticky-table::-webkit-scrollbar { 
 
    width: 0.7em; 
 
    height: 0.7em; 
 
} 
 

 
.sticky-table::-webkit-scrollbar-track { 
 
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 
 
} 
 

 
.sticky-table::-webkit-scrollbar-thumb { 
 
    background-color: #b37e7e; 
 
    outline: 1px solid slategrey; 
 
    border-radius: 5px; 
 
}
<div class="row"> 
 
    <div class="col-md-12"> 
 
    <div class="sticky-table sticky-headers"> 
 
     <table class="table table-striped table-striped"> 
 
     <thead> 
 
      <tr class="sticky-row"> 
 
      <th>Campaign Name</th> 
 
      <th>Ad Sets</th> 
 
      <th>Ads</th> 
 
      <th>Blue</th> 
 
      <th>2000</th> 
 
      <th>Ford</th> 
 
      <th>Escort</th> 
 
      <th>Blue</th> 
 
      <th>2000</th> 
 
      <th>Ford</th> 
 
      <th>Escort</th> 
 
      <th>Blue</th> 
 
      <th>2000</th> 
 
      <th>2000</th> 
 
      <th>Ford</th> 
 
      <th>Escort</th> 
 
      <th>Blue</th> 
 
      <th>2000</th> 
 
      <th>2000</th> 
 
      <th>Ford</th> 
 
      <th>Escort</th> 
 
      <th>Blue</th> 
 
      <th>2000</th> 
 
      <th>2000</th> 
 
      <th>Ford</th> 
 
      <th>Escort</th> 
 
      <th>Blue</th> 
 
      <th>2000</th> 
 
      <th>2000</th> 
 
      <th>Ford</th> 
 
      <th>Escort</th> 
 
      <th>Blue</th> 
 
      <th>2000</th> 
 
      <th>2000</th> 
 
      <th>Ford</th> 
 
      <th>Escort</th> 
 
      <th>Blue</th> 
 
      <th>2000</th> 
 

 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
      <td class="sticky-cell">Demo Campaign</td> 
 
      <td class="sticky-cell">100</td> 
 
      <td class="sticky-cell">200</td> 
 
      <td>2000</td> 
 
      <td>Ford</td> 
 
      <td>Escort</td> 
 
      <td>Blue</td> 
 
      <td>2000</td> 
 
      <td>Ford</td> 
 
      <td>Escort</td> 
 
      <td>Blue</td> 
 
      <td>2000</td> 
 
      <td>2000</td> 
 
      <td>Ford</td> 
 
      <td>Escort</td> 
 
      <td>Blue</td> 
 
      <td>2000</td> 
 
      <td>2000</td> 
 
      <td>Ford</td> 
 
      <td>Escort</td> 
 
      <td>Blue</td> 
 
      <td>2000</td> 
 
      <td>2000</td> 
 
      <td>Ford</td> 
 
      <td>Escort</td> 
 
      <td>Blue</td> 
 
      <td>2000</td> 
 
      <td>2000</td> 
 
      <td>Ford</td> 
 
      <td>Escort</td> 
 
      <td>Blue</td> 
 
      <td>2000</td> 
 
      <td>2000</td> 
 
      <td>Ford</td> 
 
      <td>Escort</td> 
 
      <td>Blue</td> 
 
      <td>2000</td> 
 
      <td>2000</td> 
 
      </tr> 
 
      <tr> 
 
      <td class="sticky-cell">Demo Campaign</td> 
 
      <td class="sticky-cell">100</td> 
 
      <td class="sticky-cell">200</td> 
 
      <td>Blue</td> 
 
      <td>2000</td> 
 
      <td>Ford</td> 
 
      <td>Escort</td> 
 
      <td>Blue</td> 
 
      <td>2000</td> 
 
      <td>Ford</td> 
 
      <td>Escort</td> 
 
      <td>Blue</td> 
 
      <td>2000</td> 
 
      <td>2000</td> 
 
      <td>Ford</td> 
 
      <td>Escort</td> 
 
      <td>Blue</td> 
 
      <td>2000</td> 
 
      <td>2000</td> 
 
      <td>Ford</td> 
 
      <td>Escort</td> 
 
      <td>Blue</td> 
 
      <td>2000</td> 
 
      <td>2000</td> 
 
      <td>Ford</td> 
 
      <td>Escort</td> 
 
      <td>Blue</td> 
 
      <td>2000</td> 
 
      <td>2000</td> 
 
      <td>Ford</td> 
 
      <td>Escort</td> 
 
      <td>Blue</td> 
 
      <td>2000</td> 
 
      <td>2000</td> 
 
      <td>Ford</td> 
 
      <td>Escort</td> 
 
      <td>Blue</td> 
 
      <td>2000</td> 
 

 
      </tr> 
 
     </tbody> 
 
     <tfoot> 
 
      <tr class="sticky-row"> 
 
      <th class="sticky-cell">Demo Campaign</th> 
 
      <th class="sticky-cell">100</th> 
 
      <th class="sticky-cell">200</th> 
 
      <th>Blue</th> 
 
      <th>2000</th> 
 
      <th>Ford</th> 
 
      <th>Escort</th> 
 
      <th>Blue</th> 
 
      <th>2000</th> 
 
      <th>Ford</th> 
 
      <th>Escort</th> 
 
      <th>Blue</th> 
 
      <th>2000</th> 
 
      <th>2000</th> 
 
      <th>Ford</th> 
 
      <th>Escort</th> 
 
      <th>Blue</th> 
 
      <th>2000</th> 
 
      <th>2000</th> 
 
      <th>Ford</th> 
 
      <th>Escort</th> 
 
      <th>Blue</th> 
 
      <th>2000</th> 
 
      <th>2000</th> 
 
      <th>Ford</th> 
 
      <th>Escort</th> 
 
      <th>Blue</th> 
 
      <th>2000</th> 
 
      <th>2000</th> 
 
      <th>Ford</th> 
 
      <th>Escort</th> 
 
      <th>Blue</th> 
 
      <th>2000</th> 
 
      <th>2000</th> 
 
      <th>Ford</th> 
 
      <th>Escort</th> 
 
      <th>Blue</th> 
 
      <th>2000</th> 
 

 
      </tr> 
 
     </tfoot> 
 
     </table> 
 
    </div> 
 
    </div> 
 

 
</div>

İlgili konular