JavaScript - добавление строк в таблицу

Май 12, 2006

Еще одна заметка о AJAX - подобных интерфейсах. Не так давно я написал о том, как можно удалять строки из таблиц с помощью JavaScript. С тех пор статистика переходов поисковиков показала что нужно сделать и заметку посвященную добавлению, так как Яндекс, например, по запросу "javascript добавить строку в таблицу" (без кавычек) первым выдавал мою статью
"CB’s blog " Архив блога " JavaScript - удаление строк из таблиц. Часть 1". Теперь я исправляю ситуацию. Постараюсь максимально коротко описать что к чему, не буду описывать серверную часть, а только интерфейс. В конце заметки - работающий пример.

В этот раз мы будем делать кое-какой отдел кадров. Таблица будет содержать две колонки - ФИО и Должность. ФИО - будем рассматривать как объединение Фамилии и Инициалов. Соответственно для ФИО у нас два инпута.

Итак для начала создаем код для таблицы:

<table id="tab1" class="sortable">
    <thead>
        <tr>
            <th>ФИО</th>
            <th>Должность</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Также ниже (или выше - дело вкуса) помещаем форму для ввода данных:

<form action="" id="add_persons" method="post" onsubmit="addRow();return false;">
<fieldset>
<legend>Добавить сотрудника</legend>
    <ul>
        <li>
            <label for="name">Фамилия</label>
            <input type="text" name="name" id="name" value="" size="12" tabindex="1" />
        </li>
        <li>
            <label for="initials">Инициалы</label>
            <input type="text" name="initials" id="initials" value="" size="12" tabindex="2" />
        </li>
        <li>
            <label for="posada">Должность</label>
            <input type="text" name="posada" id="posada" value="" size="12" tabindex="3" />
        </li>
        <li>
            <label for="subm">Действия</label>
            <input type="submit" name="subm" class="submit" value="Добавить" tabindex="4" />
        </li>
	</ul>
</fieldset>
</form>

Все что осталось - подключить небольшой скрипт для обработки:

var d = document;

var name;
var initials;
var posada;

function addRow()
{
    // Считываем значения с формы
    name = d.getElementById('name').value;
    initials = d.getElementById('initials').value;
    posada = d.getElementById('posada').value;

    // Находим нужную таблицу
    var tbody = d.getElementById('tab1').getElementsByTagName('TBODY')[0];

    // Создаем строку таблицы и добавляем ее
    var row = d.createElement("TR");
    tbody.appendChild(row);

    // Создаем ячейки в вышесозданной строке
    // и добавляем тх
    var td1 = d.createElement("TD");
    var td2 = d.createElement("TD");

    row.appendChild(td1);
    row.appendChild(td2);

    // Наполняем ячейки
    td1.innerHTML = name+' '+initials;
    td2.innerHTML = posada;
}

Вот и все.

Работающий пример

Комментарии (18) на “JavaScript - добавление строк в таблицу”

Seva Isachenko:
Май 12th, 2006 в 5:53 pm
IE 5.5 гибнет: “Программа lexplore вызвала ошибку MSHTML.DLL и будет закрыта” (Windows Me)
svoloshyn:
Май 15th, 2006 в 10:52 am
Спасибо за информацию. Теперь я исправил и все должно работать. Глюк был на этапе раскрашивания новой строки.
Demon:
Май 22nd, 2006 в 11:08 am
Большое спасибо за этот пример.
Есть еще два вопроса от чайника полного:
1 - Как сделать чтоб таблица создавалась на другой страничке?
2 - Чтобы после все этого наша таблица еще и сохраняла внесенные в нее данные.
Спасибо большое заранее.
svoloshyn:
Май 22nd, 2006 в 11:19 am
Постараюсь ответить. Если ктото может сказать больше - просьба не молчать.
1 - точно не знаю. Думаю можно попробовать там где мы выбираем таблицу:
```
var tbody = d.getElementById('tab1').getElementsByTagName('TBODY')[0];
```
Вместо d. написать тот document(элемент видимо уже другого окна (window)), в котором находится таблица.

2 - Для того чтобы таблица сохраняла данные, можно например эти данные записывать в базу данных. Как примерно это можно сделать рекомендею прочитать в одной из моих предыдущих заметок об удалении строк.
http://sudoku.org.ua/rus/blog/2006/03/30/deltablerows2/
Demon:
Май 22nd, 2006 в 11:39 am
Привязать к БД страничку было бы неплохо.
С какими базами можно работать через JavaScript?
Если есть еще какие нибуть ссылочки или примеры скинь плиз.
svoloshyn:
Май 22nd, 2006 в 11:45 am
В статье которую я привел выше, по-моему достаточно написано, просто возможно плохо . Так вот если разобраться, то можно увидеть, что работа с БД идет не через JavaScript, а через PHP, а JavaScript просто генерирует запрос к PHP-скрипту с данными. Сам же PHP может работать с тучей разных БД, но как правило это MySQL.
Sergey:
Июнь 26th, 2006 в 10:24 am
Как бы ещё сделать так чтоб в табличке каждый элемент td и tr имел свой id, примерно так ?
svoloshyn:
Июнь 26th, 2006 в 10:37 am
```
var row = d.createElement("TR");
expertstbody.appendChild(row);
row.id = "r"+id;
```
Для td - аналогично. Замечу, что id скорее всего нужно брать с БД - как id свежедобавленного едемента в таблицу БД. Для этого я использую такую функцию:
```
function getAutoIncrement($db,$tableName)
{
    $query = "show table status like '$tableName'";
$result = $db->query($query);
	$row = $result->fetch();

	return $row["Auto_increment"];
}
```
svoloshyn:
Июнь 26th, 2006 в 10:38 am
id можно задавать так:
```
var row = d.createElement("TR");
expertstbody.appendChild(row);
row.id = "r"+id;
```
Для td - аналогично. Замечу, что id скорее всего нужно брать с БД (тут немного нужно поAJAXить) - как id свежедобавленного едемента в таблицу БД. Для этого я использую такую функцию:
```
function getAutoIncrement($db,$tableName)
{
    $query = "show table status like '$tableName'";
    $result = $db->query($query);
    $row = $result->fetch();

    return $row["Auto_increment"];
}
```
LP:
Июль 25th, 2006 в 10:11 am
AJAXовый векторный графический редактор уже запущен! Такого в браузере без Flash вы еще не видели.
Alex:
Октябрь 27th, 2006 в 5:59 pm
Спасибо, Ваши статьи очень помогли. Большой респект.
CB’s blog » Архив блога » Выбираем столбцы таблицы для отображения:
Ноябрь 19th, 2006 в 8:34 pm
[…] Добавление строк в таблицу. […]
shod:
Февраль 26th, 2007 в 10:57 pm
С простым добавлять строки в таблицу уже разобрался. Но появилась другая проблема. Необходимо динамически сформировать таблицу, которая находится внутри формы, а затем содержимое формы отправить для вставки добавленных записей в БД. Так вот строки, которые формируются динамически на форме не приходят на сервер! В чем дело? Подскажите.
svoloshyn:
Февраль 27th, 2007 в 1:02 pm
2Shod: попробуйте сделать по аналогии с тем как описано в этой заметке:
http://sudoku.org.ua/rus/blog/2006/03/30/deltablerows2/
Ольга:
Октябрь 12th, 2007 в 4:55 pm
Как сделать строки таблицы во время динамического заполнения полосатыми? Вы используете class=”sortable”. Как выглядит при этом код CSS?
svoloshyn:
Октябрь 12th, 2007 в 6:54 pm
2Ольга:
За это отвечает этот кусок кода JS в файле

http://sudoku.org.ua/rus/blog/examples/addtablerows/addrows.js
var l = expertstbody.getElementsByTagName(”TR”).length + 1;
row.className = ((l%2)==0 ? “odd” : “even”);

CSS:
tbody .odd {
color: #000;
background-color: #efe;
}

tbody .even {
color: #000;
background-color: #eef;
}
Jet:
Октябрь 15th, 2008 в 3:59 pm
А можно ли добавлять ячейки не в конец, а в середину таблицы?
svoloshyn:
Октябрь 15th, 2008 в 4:49 pm
2Jet: можно, просто вместо appendChild нужно использовать что-то типа insertBefore.

CB's blog

JavaScript - добавление строк в таблицу

Комментарии (18) на “JavaScript - добавление строк в таблицу”

Добавить комментарий