Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > scroll содержания таблицы

Автор: niasilil 10.8.2008, 08:34

Есть табличка из множества строк, под табличкой пара кнопок.
Нужно сделать так чтобы содержимое таблицы прокрутывалось, при этом заголовок и кнопки оставались на месте.
Единственное, что приходит на ум это сделать две таблички и поместить вторую в scrollable div. Решение подходит, но размеры колонок получаются разные.

Как установить размеры столбцов первой таблицы? заранее размеры ячеек второй таблицы неизвестны. Вроде как надо что то делать в функции onload(), но что?

Спасибо.
Если есть другие идеи чтоб не разбивать таблицы, то было бы тоже здорово.
И да, в поиске чего то с полпинка не нашел, а ключевой фразы на ум не приходит.

Автор: Itsys 10.8.2008, 12:57

Я делал так:

Код


function HeaderSizes(mtable, header)
{
    //mtable - основная таблица, header - таблица с заголовком
    var ctable = mtable.rows.item(0).cells;
    var cheader = header.rows.item(0).cells;
    for (var i = 0; i < ctable.length; i++){
        cheader.item(i).width = ctable.item(i).clientWidth - 2;
    }
}

Добавлено через 1 минуту и 33 секунды
ЗЫ советую поставить функцию не только в onLoad, но и в onChange

Автор: ksnk 10.8.2008, 13:50

Цитата(Itsys @ 10.8.2008, 12:57

)

Я делал так:

А доктайп и стили таблицы можно озвучить?

Автор: Itsys 10.8.2008, 16:39

ksnk,

Делал под IE 7 для внутреннего сервера, без доктайпа, а из стилей обычный двухпискельный бордер...

ЗЫ Я не говорил, что это кросплатформенное решение.

ЗЗЫ Ну если хорошенько подумать, то можно чего-нибудь сварганить...

Автор: ksnk 10.8.2008, 18:43

Itsys, Спасибо ;-) Под нужными мне доктайпами и под доступными мне браузерами оно действительрно работает. я обычно такое решал с помошью table-layout:fixed и заранее определенными размерами столбцов. Так лучше!

Автор: niasilil 11.8.2008, 07:20

Спасибо, работает под ie7, что мне и надо.

Автор: niasilil 12.8.2008, 03:59

Рано радовался, блин. Под конец дня вылез баг.
Если первая ячейка второй таблицы не содержит данных (<td></td>), то javascript вылетает с ошибкой.

Чего делать? Можно ли как то измерить рамер и скопировать размер ячейки если в ней нет данных?

Автор: niasilil 12.8.2008, 04:38

хм, сделал пример, и все работает без наших css и всяких taglibs. Странно.

Код


<html>
<head>
<script>
function HeaderSizes()
{
    var ctable = document.getElementById("TB").rows.item(0).cells;
    var cheader = document.getElementById("TA").rows.item(0).cells;
    for (var i = 0; i < ctable.length; i++){
        if(cheader(i).clientWidth < ctable(i).clientWidth)
        {
            cheader(i).width = ctable(i).clientWidth - 2;
        } 
        else 
        {
            ctable(i).width = cheader(i).clientWidth - 2;
        }
    }
}
</script>

</head>
<body onLoad="HeaderSizes()">
<table id="TA" border="1">
    <tr>
        <td>header1</td>
        <td>header2</td>
        <td>longheader</td>
    </tr>
</table>
<table id="TB" border="1">
    <tr>
        <td></td>
        <td>test2</td>
        <td>short</td>
    </tr>
    <tr>
        <td>test3longer_than_the_header</td>
        <td>The longest line</td>
        <td>short</td>
    </tr>
</table>
</body
</html>

PS Сильно не пинайте ногами за простые вопросы, я все больше по java специалист, а не по javascript.

Автор: Itsys 12.8.2008, 10:55

Вставь в пустую ячейку   и будет тебе счастье smile

Автор: niasilil 16.8.2008, 04:10

Цитата(Itsys @ 12.8.2008, 10:55)

Вставь в пустую ячейку   и будет тебе счастье smile

ну это первое что пришло на ум.
на самом деле у меня в коде просто была ошибка, все прекрасно работает. Спасибо.