Не генерируются таблицы
Здравствуйте подскажите почему у меня не генерируются таблицы, когда было 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();
|
Dark19,
1. элементов нет на странице когда работает скрипт - 6 строку поставьте на 18 |
ставил, не помогает, пишет: Uncaught TypeError: Cannot read property 'getElementsByTagName' of null в 34 строке js кода
|
Dark19,
:cray: Вариант генерации таблицы на js http://javascript.ru/forum/project/12453-igra-pyatnashki-2.html#post75072 Вариант генерации таблицы на jquery http://javascript.ru/forum/project/3...tml#post232606
<!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>
|
Цитата:
var caption = (i == 1) ? 'Цвет фона' : 'Цвет текста'; html += '<table><caption>' + caption + '</caption>'; |
рони,
спасибо, очень помогли, я так понял моя ошибка в том, что я в одну и ту же переменную записывал код и сразу выводил его заменяя предыдущий? |
Цитата:
|
| Часовой пояс GMT +3, время: 23:04. |