Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Не получается разобраться с position <td> в таблице (https://javascript.ru/forum/xhtml-html-css/68407-ne-poluchaetsya-razobratsya-s-position-td-v-tablice.html)

Negotiant 14.04.2017 00:49

Не получается разобраться с position <td> в таблице
 
По условию хитрой задачи нужно динамически создать таблицу (с position:absolute, раскрасить под шахматную доску и добавить в ячейки случайные числа..), её ячейкам присвоить position:absolute (подозреваю, для дальнейшей анимации..), пытался решить вопрос поместив в ячейку элемент data (о коварных свойствах ячеек читал..) и ему присвоить absolute, и добавив float.. Но что-то пошло не так :)..Буду признателен за совет...
elem2.onclick = function createTable() {
    var table, row, td;
    var max = 50;
    var min = 10;
    table = document.createElement('table');
    table.width = '500px';
    table.style.height = '500px';
    table.style.textAlign = 'center';
    for (var k = 0; k < 10; k++) {
    row = document.createElement('tr');
    row.style.position = 'absolute';
    row.style.cssFloat = 'left';
    for (var m = 0; m < 10; m++) {
    data = document.createElement('td');
    data.style.border = '1px solid #b87333';
    data.width = '50px';
    data.height = '50px';
          data.style.position = 'absolute'; //-----как быть?
          data.style.cssFloat = '   ';  //  -----
    data.innerHTML = Math.floor(Math.random() * (max - min + 1)) + min;
            if ((k + m) & 1)     //Если сумма i+j нечетная, то:
            {
                data.style.backgroundColor = '#6B8E23';//цвет фона ячейки

            } else {
                data.style.backgroundColor = '#B8860B';//цвет фона ячейки

            };
            row.appendChild(data);
        };
        table.appendChild(row);
    };
    document.body.appendChild(table);
   
};

рони 14.04.2017 01:37

Цитата:

Сообщение от Negotiant
её ячейкам присвоить position:absolute

бредовая идея позиционировать строки и ячейки

ksa 14.04.2017 08:30

Цитата:

Сообщение от Negotiant
присвоить absolute, и добавив float

К чему такая комбинация? :blink:

Negotiant 14.04.2017 10:38

Вчера после полуночи такая "комбинация" казалась идеей..Если не ошибаюсь, ячейки добавляются с конца строки, вот и подумал..

рони 14.04.2017 10:43

Negotiant,
ячейки добавляются туда, куда вы захотите их добавить.


Часовой пояс GMT +3, время: 07:19.