Установить максимальное количество отображаемых строк для таблицы HTML - PullRequest
Новая
       13

Установить максимальное количество отображаемых строк для таблицы HTML

11 голосов
/ 22 января 2010

Иметь JSP-страницу с динамически генерируемой HTML-таблицей с неизвестным количеством строк.

Имейте свойство на бэкэнде, которое устанавливает максимальное количество строк, например: max_rows = 15 .

Как ограничить количество строк в таблице HTML значением max_rows ? Другая часть таблицы должна быть доступна при вертикальной прокрутке, это означает, что пользователь видит 15 строк, а если прокрутить вниз, то будут видны другие строки таблицы.

Это можно сделать эмпирически, рассчитав среднюю высоту строки и используя свойство max-height для div-wrapper, но я думаю, что этот подход не очень стабилен.

Так что нужно полагаться на количество строк. Возможно, есть плагин для такого случая или это стандартное решение CSS или HTML?

Ответы [ 5 ]

10 голосов
/ 23 января 2010

Это можно сделать с помощью стандартного HTML, CSS и небольшого количества javascript. Это может быть сделано для постепенного ухудшения качества для клиентов с отключенным javascript. Под этим я подразумеваю, что они просто увидят исходную таблицу, не измененную полосами прокрутки. Попробуйте что-то вроде этого: 

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

Это было протестировано в Firefox, Chrome и IE 7, но оно должно работать во всех современных браузерах. Обратите внимание, что не имеет значения, каков размер содержимого каждой строки или какой отступ имеет каждая ячейка. Если вы не хотите использовать border-collapse: collapse в своей таблице, вам придется добавить код в цикл for, чтобы учесть пространство ячеек.

Если у вас более толстые границы, замените функцию 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;
    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";
    }
}

Try / catch там обрабатывает различия между IE и другими браузерами. Код в подвохе для IE.

2 голосов
/ 07 марта 2015

Редактировать : Это фактически не решает предложенную проблему. Я пропустил ту часть вопроса, что пользователь должен иметь возможность прокрутки, чтобы увидеть остальные строки. Упс. Итак, я полагаю, что js действительно необходим.

На самом деле это можно сделать без JavaScript. Трюк использует nth-child(x): 

table {
    border-collapse: collapse;
}

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

Обвал необходим для того, чтобы граница не выходила за пределы скрытых строк.

Вот скрипка .

2 голосов
/ 22 января 2010

Поместите таблицу в блок div и используйте CSS, чтобы указать свойство высоты и переполнения div. 

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

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

Таким образом, div имеет фиксированную высоту, и браузер добавит полосу прокрутки, когда содержимое блока div слишком высокое.

Я установил высоту 15em, что соответствует 15 * font-height. При использовании границ, отступов и прочего эта высота неверна. Но он может быть рассчитан более правильно (в пикселях) для вашего дизайна.

1 голос
/ 22 января 2010

Нет способа сделать это только с помощью CSS и HTML, вам также нужен javascript. Получите высоту 15 верхних рядов и ограничьте высоту обтекания div этой высотой. Установите переполнение: авто на div, чтобы получить полосы прокрутки.

Не забудьте установить высоту по умолчанию для div как запасной вариант, если javascript отключен.

0 голосов
/ 11 октября 2017

Вы можете использовать функцию slice: 

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