Показать сообщение отдельно
  #1 (permalink)  
Старый 14.04.2017, 00:49
Интересующийся
Отправить личное сообщение для Negotiant Посмотреть профиль Найти все сообщения от Negotiant
 
Регистрация: 27.03.2017
Сообщений: 28

Не получается разобраться с 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);
   
};
Ответить с цитированием