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

Вот и все.

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

Комментарии (26) на “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.
sunny:
Январь 5th, 2009 в 2:36 pm
Скажите, у меня в поля вводится количество строк и столбцов в создаваемой по нажатию кнопки таблице. Как сделать так, чтобы ячейки заполнялись случайно от 1 до 1000?
svoloshyn:
Январь 5th, 2009 в 2:40 pm
2sunny: как-то так
td1.innerHTML = Math.ceil(1000*Math.random());
Дата последнего обновления таблицы | Записки MySQL девелопера:
Январь 20th, 2009 в 9:31 am
[…] P.S. Люди еще умудряются этим запросом LAST_INSERT_ID брать, вместо того, чтобы написать SELECT LAST_INSERT_ID() . […]
Евгений:
Июль 13th, 2009 в 6:26 pm
Здравствуйте, спасибо боль�?ое за Ва�? блог, очень мне помог. Но вот возник вопрос( я если честно до этого все время использовал исключительно php? но ситуация прижала при�?лось использовать js, короче говоря я в этом пока ноль)… Ах да вопрос… как сразу проверять при вставке в таблицу элементов на уникальность… и сразу проверять количество элементов, чтоб не боль�?е X можно было ставить…
Ага, и еще… и в правду можно ли создать таблицу в форме, где в нее вставлять hiden-поля, а потом уже обрабатывать и втавлять в базу с помощью php? Заранее благодарен.
svoloshyn:
Июль 13th, 2009 в 6:31 pm
2Евгений
Можете добавлять hidden поля как-то так:
```
td2.innerHTML = posada + <input type="hidden" value="123" name="my_hidden_123" />;
```



	
	
		
			svoloshyn:
						


			Июль 13th, 2009 в 6:34 pm 

			Для ограничения количества нужно изменить код как-то так:

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

// Не более 10 строк
if(tbody.rows.length <= 10) {
 // сюда вставляем остальной код
}

		

	
	
		
			Евгений:
						


			Июль 13th, 2009 в 8:18 pm 

			Спасибо огромное за оперативный ответ, неожидал. Знаете, я уже как раз так и сделал, подабавлял hiden поля, обычным циклом проверил на уникальность и еще так же проверил на кол-во записей…. огромное спасибо… еще аопрос… теперь еще возник вопрос, какие уязвимости могут быть при передачи этих hiden полей для обработки php и добавления их в бд? Еще раз спасибо


		

	
	
		
			svoloshyn:
						


			Июль 13th, 2009 в 9:01 pm 

			Могу только сказать что нужно будет проводить абсолютно все проверки на сервере (ограничения на уникальность или количество, права доступа и т. д.) - так если бы это было не на JavaScript з hidden полями а обычная форма с текстовыми полями, все проверки которые выполняются JavaScript-ом нужно дублировать проверками на PHP.



 


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






Имя (required)


Email (не будет опубликован) (required)


Website



= 2x2

CB's blog

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

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

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