2017-12-13 151 views
6

Tôi có một kịch bản trong đó tôi phải di chuyển thẻ thứ hai của mỗi chân trang ở cuối cuộn cuộn. Đây là số plnkr.Di chuyển chân trang bảng xuống dưới cùng của cuộn div động bằng cách sử dụng jquery

tôi có thể di chuyển nó hardcoded bởi

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

nhưng tôi muốn để tính toán 260 và làm điều đó. Cần giúp đỡ.

+0

Tính đến mục đích gì? Bạn có nghĩa là tính toán khoảng cách cần thiết để di chuyển xuống phía dưới tùy thuộc vào số hàng có? – zer00ne

+0

Thay vì xác định khoảng cách từ trên cùng, bạn đã thử khoảng cách từ dưới cùng với '.css ('bottom', 0);'? – Adriano

+0

Không cần sử dụng jQuery để giải quyết vấn đề này. Một vài dòng CSS đơn giản là tất cả những gì cần thiết. Tôi đã cung cấp một giải pháp cho thấy phương pháp này. –

Trả lời

5

Bạn cần tính vị trí dưới cùng của toàn bộ vùng chứa và trừ chiều cao của đầu trang chân trang và thanh cuộn ngang từ nó. Nó sẽ giúp bạn có được vị trí hàng đầu của các phần tử chân trang 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 

Tạo cập nhật plunker.

+0

Cảm ơn. Tôi đạt được mục tiêu của mình thông qua mã này để tạo tiêu đề, cột và chân trang cố định. –

2

Điều này có thể đạt được bằng một vài dòng CSS đơn giản. Điều này giúp loại bỏ sự cần thiết phải thực hiện các phép tính phức tạp dựa trên chiều cao và vị trí trong jQuery, và có thêm lợi ích là đáp ứng, nếu cần thiết.

Mục tiêu là hoàn toàn định vị phần tử tfoot ở cuối phần tử .sticky-table.

Để làm điều này, chúng tôi có thể cung cấp cho .sticky-table một position: relative;tfoot a position: absolute; bottom: 0;.

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

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

Như thế này:

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

Các vấn đề liên quan