Здравствуйте подскажите почему у меня не генерируются таблицы, когда было document.write вместо innerHTML, то все работало отлично
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="table.css"/>
<script src="table.js"></script>
<title></title>
</head>
<body>
<div id="tab"></div>
<div id="color">
<p>
Реалізувати сторінку, яка містить абзац тексту і дві таблиці. У кожній таблиці має бути не менше 25 комірок. Кожна комірка повинна мати різний колір фону. При натисканні по будь-якій комірці першої таблиці встановлюється відповідний колір тексту абзацу, а натискання на будь-якій комірці у другій таблиці встановлює колір фону абзацу.
</p>
</div>
<button id="btn">Очистить</button>
</body>
</html>
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');
for (var i = 1; i <= 2; i++){
if (i == 1)
setTable.innerHTML = '<table id="table'+i+'"><caption>Цвет фона</caption>';
else
setTable.innerHTML = '<table id="table'+i+'"><caption>Цвет текста</caption>';
for (var r = 0; r < row; r++)
{
setTable.innerHTML = '<tr>';
for (var c = 0; c < cells; c++){
var rgb = rand(100000, 999999);
setTable.innerHTML = '<td style="background-color: #'+rgb+'">';
}
}
setTable.innerHTML = '</table>';
}
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();