Не генерируются таблицы
Здравствуйте подскажите почему у меня не генерируются таблицы, когда было 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, время: 02:23. |