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

Автор: http://sudoku.org.ua/

Еще одна заметка о AJAX - подобных интерфейсах. Не так давно я написал о том, как можно удалять строки из таблиц с помощью JavaScript. С тех пор статистика переходов поисковиков показала что нужно сделать и заметку посвященную добавлению, так как Яндекс, например, по запросу "javascript добавить строку в таблицу" (без кавычек) первым выдавал мою статью.

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

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

<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;
}

Вот и все.

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