Показать сообщение отдельно
  #4 (permalink)  
Старый 29.04.2014, 19:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Dark19,

Вариант генерации таблицы на js

http://javascript.ru/forum/project/12453-igra-pyatnashki-2.html#post75072


Вариант генерации таблицы на jquery
Игра на javascript

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style type="text/css">
   td{
     width: 25px;
     height: 25px;
   }

    </style>

    <title></title>
</head>
<body>
<div id="tab"></div>
<div id="color">
<p>
    Реалізувати сторінку, яка містить абзац тексту і дві таблиці. У кожній таблиці має бути не менше 25 комірок. Кожна комірка повинна мати різний колір фону. При натисканні по будь-якій комірці першої таблиці встановлюється відповідний колір тексту абзацу, а натискання на будь-якій комірці у другій таблиці встановлює колір фону абзацу.
</p>
</div>

<button id="btn">Очистить</button>
<script>
   function rand (min, max)
{

    return Math.floor( Math.random() * (max - min + 1) ) + min;
}

function generateTable(){
    var row = 5, cells = 5;
    var color;
    var setTable = document.getElementById('tab');
    var html = ""
for (var i = 1; i <= 2; i++){
    if (i == 1)
        html += '<table id="table'+i+'"><caption>Цвет фона</caption>';
    else
        html += '<table id="table'+i+'"><caption>Цвет текста</caption>';
    for (var r = 0; r < row; r++)
    {
        html += '<tr>';
            for (var c = 0; c < cells; c++){
                var rgb = rand(100000, 999999);
                html += '<td style="background-color: #'+rgb+'">';

        }
    }
    html += '</table>'
    setTable.innerHTML = html;
}
    parseTable('table1');
    parseTable('table2');

}

function parseTable(table){

    var td = document.getElementById(table).getElementsByTagName('td');
    for (var key in td)
        td[key].onclick = function() {
            var color = getComputedStyle(this).backgroundColor;
            clear();
            if (table == 'table1')
                document.getElementById('color').style.backgroundColor = color;
            else
                document.getElementById('color').style.color = color;

    }
}

function clear(){
    var col = 'rgb(00,00,00)';
    var bg = 'rgb(255,255,255)';
    document.getElementById('btn').onclick = function() {
            document.getElementById('color').style.backgroundColor = bg;
            document.getElementById('color').style.color = col;
    }
}
generateTable();

</script>
</body>
</html>
Ответить с цитированием