VPF::Создание таблицы с помощью DOM - Форум программистов

Mushu

Дата 11.7.2007, 10:56 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 257
Регистрация: 20.7.2004

Репутация: нет
Всего: -5

Скажите пожайлуста, как можно Создать таблицу с помощью DOM и при создание внасить уже данные в клетки из массива (массив произвольный данных, ) и как добавить клетке свойства(например стиль и айдэ).

Вопрос номер 2 как по таблице потом передвигаться, чтоб узнать какие данные в клетке.

Zeroglif

Дата 11.7.2007, 11:09 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 644
Регистрация: 22.9.2005

Репутация: 28
Всего: 66

Цитата(Mushu @ 11.7.2007, 10:56

)

как можно Создать таблицу с помощью DOM

Google подскажет

Mushu

Дата 11.7.2007, 11:23 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 257
Регистрация: 20.7.2004

Репутация: нет
Всего: -5

Он наглядно не подсказал, если кто встречался с этим можно пример кода.

Mymik

Дата 11.7.2007, 11:30 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1474
Регистрация: 12.5.2006
Где: Lamer-центер

Репутация: 11
Всего: 78

Функция createTable занимается добавление таблицы в body. А readTable занимается чтением таблицы

Код


<html>
<head>
<script type="text/javascript">
var myArray = new Array();
myArray[0] = new Array(1,2,3);
myArray[1] = new Array(1,2,3);
myArray[2] = new Array(1,2,3);

function createTable(tableID) 
{
    if(document.getElementById(tableID))
    {
        alert("таблица уже существует");
        return;
    }
    /* Создаем таблицу */
        var tbl=document.createElement("table");
    /* Назначаем ID */
    tbl.id=tableID;
        var tblBody=document.createElement("tbody");

    for(y=0;y<myArray.length;y++)
    {
        /* Создаем строчку */
             var row=document.createElement("tr");
        for(x=0;x<myArray[y].length;x++)
        {
            /* Создаем ячейку */
                 var cell=document.createElement("td");
            /* Заполняем ячейку */
                 cell.appendChild(document.createTextNode(myArray[y][x]));
            /* Заполняем стиль */
            cell.style.background=x%2?"green":"red";
            /* Добавляем ячейку в строку */
                 row.appendChild(cell);
            
        }
        /* Добавляем строку в таблицу */
             tblBody.appendChild(row);

    }
    /* Добавляем body в table */
        tbl.appendChild(tblBody);
    /* Добавляем таблицу на страницу */
        document.getElementsByTagName("body")[0].appendChild(tbl);
}
function readTable(tableID)
{
    
    var tbl=document.getElementById(tableID);
    if(!tbl)
    {
        alert("Таблица не существует");
        return;
    }
    /* Проходим по всем строкам таблицы */
    for(y=0;y<tbl.rows.length;y++)
    {
        /* Проходим по всем ячейкам строки */
        for(x=0;x<tbl.rows[y].cells.length;x++)
        {
            /* Получаем текст в ячейке */
            tbl.rows[y].cells[x].innerHTML;
            /* Добавляем текст на страницу */
            document.getElementsByTagName("body")[0].appendChild(document.createTextNode(tbl.rows[y].cells[x].innerHTML));
        }
        /* Перевод на следующию строчку */
        document.getElementsByTagName("body")[0].appendChild(document.createElement("BR"));
    }
}
</script>
</head>
<body>
    <input type="button" onclick="createTable('table1')" value="create table" /> <input type="button" onclick="readTable('table1')" value="read table" />
</body>
</html>

--------------------

ICQ ::            857-857
E-mail ::         mymik[at]inbox[dot]ru
HomaPage ::  http://localhost/

:to_become_senile  :this

Mushu

Дата 11.7.2007, 11:36 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 257
Регистрация: 20.7.2004

Репутация: нет
Всего: -5

Mymik большое спасибо кратко ясно и понятно

Добавлено через 10 минут
Рецепт в капилку

Loengreen

Дата 15.7.2007, 20:10 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 42
Регистрация: 13.7.2007

Репутация: нет
Всего: нет

Возникла такая проблема.
Есть таблица.
По нажатию на ячейку должна добавиться новая строка под строкой, которой принадлежит данная ячейка.
Не подскажете как можно это реализовать?

tbl.appendChild(row); - почему-то успешно вставляет строку в конце таблицы в firefox, но ничего не меняет в IE... :(

Это сообщение отредактировал(а) Loengreen - 15.7.2007, 20:42

SelenIT

Дата 15.7.2007, 21:21 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401

Loengreen,
1) Внимательно изучите пример Mymikа - там есть подсказка для Вас ("недостающее звено" между <table> и <tr>).
2) У таблиц есть собственные DOM-методы - insertRow, insertCell и т.д. Имхо, есть смысл присмотреться к ним...

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Loengreen

Дата 15.7.2007, 23:13 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 42
Регистрация: 13.7.2007

Репутация: нет
Всего: нет

Ой... Проблема в том что в js я новичок.
Пробовал спросить у yandex-a - ничего толком не нашел. :(
Мне поставили конкретную задачу - сделать редактируемую таблицу (я вообще-то занимаюсь версткой, на js пишу только простенькие скрипты типа по наведению или клику мыши сделать объект видимым и тому подобное). Может быть вы посоветуете книгу или какой-нибудь хелп, где помимо описания функций есть маленькие примеры по применению (как в Macromedia Flash).
Из тех книг, которые удалось скачать мне не в одной нет работы с html таблицами. :(

Спасибо, разобрался! smile

Это сообщение отредактировал(а) Loengreen - 16.7.2007, 00:41

Alx

Дата 28.9.2007, 14:22 (ссылка)

(нет голосов)

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

Репутация: 10
Всего: 78

http://www.w3schools.com/htmldom/dom_obj_table.asp
http://www.w3schools.com/htmldom/dom_obj_tablerow.asp
http://www.w3schools.com/htmldom/dom_obj_tabledata.asp

--------------------

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »