Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.04.2014, 18:47
Аспирант
Отправить личное сообщение для Dark19 Посмотреть профиль Найти все сообщения от Dark19
 
Регистрация: 29.04.2014
Сообщений: 82

Не генерируются таблицы
Здравствуйте подскажите почему у меня не генерируются таблицы, когда было 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();
Ответить с цитированием
  #2 (permalink)  
Старый 29.04.2014, 19:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Dark19,
1. элементов нет на странице когда работает скрипт - 6 строку поставьте на 18
Ответить с цитированием
  #3 (permalink)  
Старый 29.04.2014, 19:09
Аспирант
Отправить личное сообщение для Dark19 Посмотреть профиль Найти все сообщения от Dark19
 
Регистрация: 29.04.2014
Сообщений: 82

ставил, не помогает, пишет: Uncaught TypeError: Cannot read property 'getElementsByTagName' of null в 34 строке js кода
Ответить с цитированием
  #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>
Ответить с цитированием
  #5 (permalink)  
Старый 29.04.2014, 19:39
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от рони
    if (i == 1)
        html += '<table id="table'+i+'"><caption>Цвет фона</caption>';
    else
        html += '<table id="table'+i+'"><caption>Цвет текста</caption>';
Повторятся не хорошо.
var caption = (i == 1) ? 'Цвет фона' : 'Цвет текста';
html += '<table><caption>' + caption + '</caption>';
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #6 (permalink)  
Старый 29.04.2014, 19:39
Аспирант
Отправить личное сообщение для Dark19 Посмотреть профиль Найти все сообщения от Dark19
 
Регистрация: 29.04.2014
Сообщений: 82

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

Сообщение от Dark19
сразу выводил его заменяя предыдущий?
да
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
задание в SELECT имени таблицы переменной kostagal Серверные языки и технологии 5 13.01.2014 16:12
фильтрация .csv таблицы br1ck Элементы интерфейса 0 13.11.2013 08:35
Через ajax отправить много данных из таблицы на сервер Heger jQuery 3 29.08.2012 18:51
Ширина таблицы Syltan (X)HTML/CSS 1 01.05.2010 22:33
Фиксированный заголовок таблицы ilshat Элементы интерфейса 6 20.12.2008 00:35