2017-12-13 53 views
6

Mam scenariusz, w którym muszę przenieść każdy wiersz stopki tabeli stopki na dole przewijanego div. Oto plnkr.Przenoszenie stopki tabeli na spód przewijanego div dynamicznie za pomocą jquery

mogę przenieść to ustalony przez

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

ale chcę, aby obliczyć 260 i to zrobić. Potrzebuję pomocy.

+0

Oblicz w jakim celu? Czy masz na myśli obliczyć odległość potrzebną do przejścia na dno w zależności od liczby rzędów? – zer00ne

+0

Zamiast określać odległość od góry, wypróbowałeś odległość od dołu za pomocą '.css ('bottom', 0);'? – Adriano

+0

Nie trzeba używać jQuery, aby rozwiązać ten problem. Wystarczy kilka prostych linii CSS. Dostarczyłem rozwiązanie pokazujące tę metodę. –

Odpowiedz

5

Należy obliczyć dolną pozycję całego kontenera i odjąć od niego wysokość nagłówka stopki i poziomego paska przewijania. Dostaniesz najwyższą pozycję elementów stopki th.

$('.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 

Utworzono zaktualizowany plunker.

+0

Dzięki. Osiągam swój cel poprzez ten kod, aby utworzyć stały nagłówek, kolumny i stopkę. –

2

Można to osiągnąć za pomocą kilku prostych linii CSS. Eliminuje to potrzebę wykonywania skomplikowanych obliczeń na podstawie wysokości i pozycji w jQuery, a ponadto ma dodatkową zaletę, jeśli chodzi o czas reakcji.

Celem jest absolutne położenie elementu tfoot na dole elementu .sticky-table.

Aby to zrobić, możemy podać .sticky-table a position: relative; i tfoot a .

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

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

Jak to:

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

Powiązane problemy