Đặt số hàng được hiển thị tối đa được tính cho bảng HTML

Có trang JSP với bảng HTML được tạo động với số lượng hàng không xác định.Đặt số hàng được hiển thị tối đa được tính cho bảng HTML

Có thuộc tính trên chương trình phụ trợ, đặt số hàng tối đa, ví dụ: max_rows = 15.

Cách giới hạn số hàng cho bảng HTML thành Giá trị tối đa? Phần khác của bảng sẽ có thể truy cập bằng cuộn dọc, điều đó có nghĩa là người dùng sẽ thấy 15 hàng và nếu muốn cuộn xuống, nó sẽ được nhìn thấy các hàng khác của bảng.

Có thể thực hiện theo kinh nghiệm bằng cách tính chiều cao trung bình của hàng và sử dụng thuộc tính chiều cao tối đa cho trình bao bọc div, nhưng tôi nghĩ phương pháp này không ổn định.

Vì vậy, cần phải dựa vào số lượng hàng. Có lẽ có plugin cho trường hợp như vậy hoặc đó là giải pháp CSS hoặc HTML chuẩn?

Nguồn

2010-01-22 sergionni

Một số thông tin bổ sung ông sẽ hữu ích, đây là một trang tự động tạo ra, nếu vì vậy những gì khuôn khổ, những gì nguồn dữ liệu? Bạn cũng có nghĩa là giới hạn mà không cần cuộn, điều gì sẽ xảy ra khi bạn có nhiều hàng hơn thế? –

cảm ơn vì ký hiệu, tôi đã chỉnh sửa bài đăng rõ ràng hơn – sergionni

Điều này có thể được thực hiện với HTML, CSS chuẩn và một chút javascript. Nó có thể được thực hiện để làm suy giảm gracefully cho khách hàng với javascript tắt quá. Ý tôi là, họ sẽ chỉ thấy bảng gốc, chưa được sửa đổi bởi thanh cuộn. Hãy thử một cái gì đó như thế này:

<html> 
<head> 
    <style type="text/css"> 
     table { 
      width: 100%; 
      border-collapse: collapse; 
     } 
     td { 
      border: 1px solid black; 
     } 
     .scrollingTable { 
      width: 30em; 
      overflow-y: auto; 
     } 
    </style> 
    <script type="text/javascript"> 
     function makeTableScroll() { 
      // Constant retrieved from server-side via JSP 
      var maxRows = 4; 

      var table = document.getElementById('myTable'); 
      var wrapper = table.parentNode; 
      var rowsInTable = table.rows.length; 
      var height = 0; 
      if (rowsInTable > maxRows) { 
       for (var i = 0; i < maxRows; i++) { 
        height += table.rows[i].clientHeight; 
       } 
       wrapper.style.height = height + "px"; 
      } 
     } 
    </script> 
</head> 
<body onload="makeTableScroll();"> 
    <div class="scrollingTable"> 
     <table id="myTable"> 
      <tr> 
       <td>blah blah</td> 
       <td>blah blah</td> 
       <td>blah blah</td> 
       <td>blah blah</td> 
      </tr> 
      <tr> 
       <td>Here is some long text that should wrap: blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</td> 
       <td>blah blah</td> 
       <td>blah blah</td> 
       <td>blah blah</td> 
      </tr> 
      <tr> 
       <td>blah</td> 
       <td>blah</td> 
       <td>blah</td> 
       <td>blah</td> 
      </tr> 
      <tr> 
       <td>blah blah</td> 
       <td>blah blah</td> 
       <td>blah blah</td> 
       <td>blah blah</td> 
      </tr> 
      <tr> 
       <td>blah blah</td> 
       <td>blah blah</td> 
       <td>blah blah</td> 
       <td>blah blah</td> 
      </tr> 
      <tr> 
       <td>blah blah</td> 
       <td>blah blah</td> 
       <td>blah blah</td> 
       <td>blah blah</td> 
      </tr> 
      <tr> 
       <td>blah</td> 
       <td>blah</td> 
       <td>blah</td> 
       <td>blah</td> 
      </tr> 
     </table> 
    </div> 
</body> 
</html>

Điều này đã được thử nghiệm trong Firefox, Chrome và IE 7, nhưng nó sẽ làm việc tất cả các trình duyệt hiện đại. Lưu ý rằng không quan trọng nội dung của mỗi hàng là bao nhiêu, hoặc số lượng ô đệm mà mỗi ô có. Nếu bạn không muốn sử dụng tính năng thu gọn biên giới: thu gọn trên bảng của bạn, thì bạn sẽ phải thêm mã trong vòng lặp for để tính đến khoảng cách ô.

Nếu bạn có giáp dày hơn, sau đó thay thế các chức năng javascript với một này:

function makeTableScroll() { 
    // Constant retrieved from server-side via JSP 
    var maxRows = 4; 

    var table = document.getElementById('myTable'); 
    var wrapper = table.parentNode; 
    var rowsInTable = table.rows.length; 
    try { 
     var border = getComputedStyle(table.rows[0].cells[0], '').getPropertyValue('border-top-width'); 
     border = border.replace('px', '') * 1; 
    } catch (e) { 
     var border = table.rows[0].cells[0].currentStyle.borderWidth; 
     border = (border.replace('px', '') * 1)/2; 
    } 
    var height = 0; 
    if (rowsInTable > maxRows) { 
     for (var i = 0; i < maxRows; i++) { 
      height += table.rows[i].clientHeight + border; 
     } 
     wrapper.style.height = height + "px"; 
    } 
}

Các try/catch trong đó xử lý những khác biệt giữa IE và các trình duyệt khác. Mã trong catch là dành cho IE.

Nguồn

2010-01-23 18:37:43 DaveS

trông đầy hứa hẹn, tôi sẽ viết phản hồi ngay khi kiểm tra giải pháp này cho trường hợp của tôi – sergionni

hoạt động tốt, cảm ơn bạn đã hỗ trợ – sergionni

Điều này khá muộn, nhưng hãy kiểm tra câu trả lời của tôi. Tôi tìm thấy một cách để làm điều đó mà không cần javascript! – rarrarrarrr

Đặt bảng của bạn trong khối div và sử dụng CSS để chỉ định thuộc tính chiều cao và tràn của div.

<style type="text/css"> 
.table_outer { height: 15em; overflow: auto; } 
</style> 

<div class="table_outer"> 
    <table> 
    ...table content... 
    </table> 
</div>

Bằng cách này, div có chiều cao cố định và trình duyệt sẽ thêm thanh cuộn khi nội dung của khối div quá cao.

Tôi đã đặt chiều cao là 15em, tương ứng với 15 * chiều cao phông chữ. Khi sử dụng đường viền, phần đệm và đồ vật, chiều cao này không chính xác. Nhưng nó có thể được tính toán đúng hơn (trong px) cho thiết kế của bạn.

Nguồn

2010-01-22 13:57:06 Veger

Ồ tôi không thấy bạn đã nghĩ về điều này. Mặc dù tôi * làm * nghĩ rằng nó ổn định và được hỗ trợ bởi hầu hết/tất cả các trình duyệt. – Veger

Có, nó ổn định, nhưng tôi sợ rằng chiều cao cột có thể khác nhau vì văn bản dài bên trong và có thể gây ra một số sai sót. – sergionni

Thật vậy. Bạn có thể sử dụng JavaScript để tìm chiều cao của 15 hàng đầu tiên, thêm các giá trị này, sửa đổi chiều cao div. Nhưng điều này nghe có vẻ * rất không ổn định với tôi ... – Veger

Không có cách nào để thực hiện việc này chỉ với CSS và HTML, bạn cũng cần javascript. Lấy chiều cao của 15 hàng trên cùng, và giới hạn chiều cao của div bao quanh cho chiều cao đó. Đặt tràn: tự động trên div để có thanh cuộn của bạn.

Đừng quên đặt chiều cao mặc định trên div làm dự phòng nếu javascript bị tắt.

Nguồn

2010-01-22 16:35:59

Chỉnh sửa: Điều này thực sự không giải quyết được vấn đề được đề xuất. Tôi đã bỏ lỡ phần câu hỏi mà người dùng cần để có thể cuộn để xem phần còn lại của các hàng. Rất tiếc. Vì vậy, tôi giả sử js thực sự là cần thiết.

Điều này thực sự có thể được thực hiện mà không cần javascript. Bí quyết đang sử dụng nth-child(x):

table { 
    border-collapse: collapse; 
} 

tr:nth-child(n + 4) { 
    visibility: hidden; 
}

Đường viền là cần thiết để đường viền không mở rộng ra ngoài hàng ẩn.

Đây là fiddle.

Nguồn

2015-03-07 20:14:31 rarrarrarrr

cách thú vị – sergionni

bạn cũng có thể sử dụng display: none thay vì hiển thị: hidden nếu looping một bảng để tiết kiệm không gian – rai

Khi dữ liệu mới xuất hiện, sau đứa thứ 4. Chuyện gì xảy ra? Bạn có thể cập nhật dữ liệu con đầu tiên với dữ liệu đến không? – Jesse

Bạn có thể sử dụng chức năng slice:

$('table tbody > tr').slice(1,5).hide();

Nguồn

2017-10-11 20:21:28 user8761489

Đặt số hàng được hiển thị tối đa được tính cho bảng HTML

Trả lời

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