web. таблица 300 на 300

pilot

Хочется чтоб на html-странице была таблица. Размер, к примеру, 300 на 300. В таблице нужно уметь перекрашивать клетки (то есть какая-то программа для визуализации результатов будет их красить).
Вопрос: как сделать такую таблицу?
1. Запихать в html-файл: 300*300*length("<td/>") = 90000*5 = 450000 = 450 Кб. Много, долго грузится и инициализируется. Плохо.
2. Генерировать javascript'ом динамически: тоже долго. порядка минут 5.
Можно ли сделать через Flash или Java? Будет ли оно быстрее Javascript'a?
А если умерить аппетиты до таблицы 100 на 100?

yolki

может, проще на стороне сервера генерить картинку? PNG здесь копейки будет весить (если конечно каждая ячейка = 1 пиксель и все они по рандому закрашены, тогда да - PNG всосёт , впрочем как и любой другой алгоритм сжатия)

yolki

ЗЫ: ноликом ошибся имхо: 450кб

pilot

> может, проще на стороне сервера генерить картинку?
Картинку менять надо в зависимости от действий клиента на HTML странице. Менять часто — на каждое действие. Т.е. будет не "страница с контентом" а "программа на странице".
> каждая ячейка = 1 пиксель и все они по рандому закрашены
ячейка — 3 на 5 пикселей, например, чтоб глазом видно было. Это не картинка а "табличное представление". Цветов, соответственно, не больше 20.
Всякий обмен с сервером в процессе работы тоже нежелателен. HTML страничка в идеале должна быть независима от сервера, после того как на нем сгенерируется. Логика программы такая.

Vladislav177Rus

В данном случае Flash будет, конечно, существенно быстрее JavaScript

sbs-66

Ещё есть canvas

buka

правильный ответ: Java

maggi14

Если тебе не критична кроссплатформенность, то у майкрософта специально для таблиц есть контрол. Они и сортироваться могут на лету, и подгружаться, и перекрашиваться.

pilot

Кроссбраузерность критична.
Должно работать под Linux, Mac, Windows в IE, FF, Opera + на наладонниках (Opera Mobile и тд).
Т.е. максимально просто должно быть, поэтому очень-очень не хочется flash.

tokuchu

+ на наладонниках
А их браузер не загнётся, когда будет рендерить эту таблицу?
А то большие таблицы и на десктопе не очень быстро обрабатываются.

dedwowan

Умрут. Если это делать через HTML все умрут -)

pilot

Кхе-кхе:
Я научился делать такую таблицу в HTML:
<html>

    <head>

        <title>Test</title>

        <style type="text/css">

table.carpet {

    position: absolute;

    border: thin solid ;

    padding: 0px;

    margin: 0px;

    }



table.carpet td {

    background-color: ;

    }



        </style>

        <script type="text/javascript">

carpet = null;

function init{

    carpet = new Carpet('carpet');

    carpet.create(300,300);

    }



function Carpet(carpet_id){

    this.create = function(width,height,cellwidth,cellheight){

        cellwidth = (cellwidth || 10);

        cellheight = (cellheight || 2);

        var arr = new Array;

        var carpet = document.getElementById(carpet_id);

        arr.push('<colgroup span="'+width+'" width="'+cellwidth+'">');

        arr.push('</colgroup>');

        for(var i=0;i<height;i++){

            arr.push('<tr>');

            for(var j=0;j<width;j++){

                arr.push('<td/>');

            }

        arr.push('</tr>');

        }

    carpet.innerHTML = arr.join('');

    }

}





        </script>

    </head>

<body onload="init">

    <table border="0" id="carpet" class="carpet"></table>

</body>

</html>

Такая штука делается пару секунд.
Остается вопрос: можно ли уменьшить расстояния между ячейками?

pilot

Остается вопрос: можно ли уменьшить расстояния между ячейками?

cellspacing & cellpadding

Marinavo_0507

Картинку менять надо в зависимости от действий клиента на HTML странице. Менять часто — на каждое действие. Т.е. будет не "страница с контентом" а "программа на странице".
image map?
скачать и показать картинку всяко проще чем таблицу такого же размера

dedwowan

А какой у тебя проц? -)
И на сколько быстро он перерисовывает изображение? Например если я изменю размер окна?

pilot

Например если я изменю размер окна?

Нетрудно видеть, что размеры везде абсолютные. Поэтому размер окна влияет только на размер окна. Придется скроллить.
И на сколько быстро он перерисовывает изображение?

Какое? Скроллит быстро.
А какой у тебя проц?
А это неважно. Рисует быстро — он не пересчитывает расположение ячеек друг относительно друга.
Я прочитал про table layout на w3c.org:
http://www.w3.org/TR/html4/struct/tables.html#edef-COLGROUP
http://www.w3.org/TR/html4/appendix/notes.html#notes-tables
И там говорится про Fixed Layout Algorithm

dedwowan

Мда, уж проще посмотреть самому...
1. Не кроссбраузерный скрипт - в ИЕ не работает. Хотя эту проблемы ты решишь я думаю
2. При изменении размеров окна тратится около секунды на перерисовку изображения в FF
3. При скроллинге имеются явно различимые тормоза в FF
4. На моей машине скрипт отрабатывает где-то за 5 секунд.
Вывод не дай боже такое окажется на компе слабже моего. Там все умрут. Причем проблема не в скрипте, а в скорости обработки документа DOM браузером
А теперь самое веселое. Необходимо не только показать 90000 квадратиков, но и обеспечить некую работу с ним. Можешь дать оценку сколько времени будут работать скрипты, обслуживающие данную табличку? -)

pilot

1. Ага
2. А, это. Это я не считал за время даже Будет не 3д шутер и не первая страница гугла, а окно программы.
3. не могу различить
4. 5 секунд — это _очень_ хорошо. Пользователь будет готов и к 10 — потому что это прога а не сайт. Нет задачи удержать проходящего мимо пользователя.
И последнее: рисование заключается только в изменении цвета. Я тестировал на 150 на 150 — рисует быстро. Линии рисует.
Сейчас написал рандом — тоже быстро. Фишка в том что ты заранее знаешь структуру детей table.
Поэтому можно не искать нужную ячейку, а вычислять ее:
    this.paint = function{

        var row = carpet.childNodes[1].childNodes[Math.floor(Math.random*carpet.childNodes[1].childNodes.length)];

        row.childNodes[Math.floor(Math.random*row.childNodes.length)].className = 'active';

        setTimeout(paint,100);

    }

    var paint = this.paint;

dedwowan

А зачем тогда вообще используется браузер?
Не проще просто написать на сях прогу и пусть люди работают с ней?

Bibi

кросс-платформенность

dedwowan

Что за брет? Использовать убогую оболчку, только из-за того что не могут в элементарной задаче решить вопрос кросс-платформенности?

bansek

Абсолютно спозиционированные дивы с уникальными id вида div_<col>_<row> пробовал?
Имхо должно получиться лучше таблички во всех отношениях.
Да, дивы ессно генерить js.

pilot

Пробовал какие-то. Наверно не абсолютные. Сдохли на 30 на 30.
Из каких соображений div'ы будут лучше?
Оставить комментарий
Имя или ник:
Комментарий: