Sửa lỗi trên trang cuộn

Question

Tình huống: Trang có bảng có nhiều hàng. Tôi muốn sửa lỗi khi đến đầu trang khi cuộn, sử dụng jquery hoặc bất kỳ tập lệnh nào. Tôi không muốn tự xóa chính bảng.

Answer 1

Bạn có thể sử dụng mã Lobstrosity với một sửa đổi nhỏ: position: fixed thay vì absolute.

position: fixed hiện được chấp nhận rộng rãi bởi tất cả các trình duyệt bao gồm IE8 trở đi. BTW cố định hiển thị đẹp hơn trên thiết bị di động/máy tính bảng hơn position: absolute.

tôi thấy rằng trên một bảng với độ rộng năng động cho mỗi cột, hoàn toàn vị trí < thead> sẽ mất độ rộng của phần còn lại của các cột, vì vậy để sửa lỗi này tôi đã đưa ra đoạn mã sau:

gì mã này không được như sau:

Xác định độ rộng của mỗi cột trong bảng của bạn bằng cách nhìn lên độ rộng CSS của < tbody> < tr> < td> dòng đầu tiên và lưu trữ chúng trong một mảng cho sau này . Khi người dùng cuộn lớp 'cố định' được thêm vào số < thead> (Hành vi trình duyệt mặc định sẽ thay đổi độ rộng của < th> và chúng sẽ không khớp với số < tbody>. đặt độ rộng của < th> thành giá trị mà chúng tôi đã đọc trước đó.

Dù sao đây là các mã:

CSS

table.entries {width: 100%;border-spacing: 0px;margin:0;} 
table.entries thead.fixed {position:fixed;top:0;} 

HTML

<table class="entries" id="entriestable"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Email</th> 
      <th>Location</th> 
      <th>DOB</th> 
      <th>Opt&nbsp;in</th> 
      <th>Added</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td class="name">Ricky Bobby</td> 
      <td>ricky.bobby@email.com</td> 
      <td class="addy"><i>Kent, GB</i></td> 
      <td class="dob">20/08/1984</td> 
      <td>Yes</td> 
      <td class="date">4 hours ago</td> 
     </tr> 
    </tbody> 
</table> 

Javascript

TableThing = function(params) { 
    settings = { 
     table: $('#entriestable'), 
     thead: [] 
    }; 

    this.fixThead = function() { 
     // empty our array to begin with 
     settings.thead = []; 
     // loop over the first row of td's in <tbody> and get the widths of individual <td>'s 
     $('tbody tr:eq(1) td', settings.table).each(function(i,v){ 
      settings.thead.push($(v).width()); 
     }); 

     // now loop over our array setting the widths we've got to the <th>'s 
     for(i=0;i<settings.thead.length;i++) { 
      $('thead th:eq('+i+')', settings.table).width(settings.thead[i]); 
     } 

     // here we attach to the scroll, adding the class 'fixed' to the &lt;thead> 
     $(window).scroll(function() { 
      var windowTop = $(window).scrollTop(); 

      if (windowTop > settings.table.offset().top) { 
       $("thead", settings.table).addClass("fixed"); 
      } 
      else { 
       $("thead", settings.table).removeClass("fixed"); 
      } 
     }); 
    } 
} 
$(function(){ 
    var table = new TableThing(); 
    table.fixThead(); 
    $(window).resize(function(){ 
     table.fixThead(); 
    }); 
}); 

Answer 2

Đây là thứ mà hoạt động (được kiểm tra nhanh trong FF 3.5, Chrome 3 và IE 8) mà bạn có thể điều chỉnh theo nhu cầu của mình.

Nó sử dụng vị trí tuyệt đối của thead. Khi thead trở thành vị trí hoàn toàn, điều này về cơ bản sẽ loại bỏ nó khỏi dòng gốc của table và độ rộng của tất cả các điều chỉnh tbodytd s tương ứng. Vì vậy, bạn nhận được hành vi xấu xí nếu bạn không chỉ định chiều rộng cột hoặc nếu tiêu đề của bất kỳ cột nào rộng hơn bất kỳ ô nào khác trong cột đó.

CSS

#Grid thead.Fixed 
{ 
    position: absolute; 
} 

HTML

<table id="Grid"> 
    <thead> 
     <tr> 
      <td>A</td> 
      <td>B</td> 
      <td>C</td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
     </tr> 
     <!-- etc. --> 
    </tbody> 
</table> 

jQuery

$(function() { 
    var table = $("#Grid"); 

    $(window).scroll(function() { 
     var windowTop = $(window).scrollTop(); 

     if (windowTop > table.offset().top) { 
      $("thead", table).addClass("Fixed").css("top", windowTop); 
     } 
     else { 
      $("thead", table).removeClass("Fixed"); 
     } 
    }); 
}); 

tôi nhận thấy rằng nó không hoạt động trong IE u nless bạn chỉ định một XHTML DOCTYPE nghiêm ngặt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
    <!-- etc. --> 

Answer 3

(function ($) { 
    $.fn.fixedHeader = function() { 
     return this.filter('table').each(function() { 
      var that = this; 
      var $head = $('<div></div>').addClass('head'); 
      $(this).before($head); 
      $('th', this).each(function() { 
       var $el = $(this); 
       var $div = $('<div></div>').width($el.outerWidth()).text(
       $el.text()); 
       $head.append($div); 
      }); 
      $(window).on('scroll', function() { 
       var $that = $(that); 
       var w = $(window).scrollTop(); 
       var o = $('th', that).first().offset().top; 
       var tableO = $that.offset().top + $that.height(); 
       if (o < w && tableO > w) { 
        $head.show(); 
       } else { 
        $head.hide(); 
       } 
      }); 
     }); 
    }; 
})(jQuery); 

Bạn có thể sử dụng plugin jquery này (bạn cần điều chỉnh kiểu đầu. Theo kiểu thead của bạn). Ví dụ làm việc tại đây: http://jsfiddle.net/lukasi/7K52p/1/