Владимир Осипов

Я надеюсь, что вам известно о DOM. Если нет, то рекомендую вначале немного ознакомиться с этой статьей.

Мы попробуем написать JavaScript код для добавления/удаления рядов в таблице без использования DHTML функций (addRow, addCell и др.), мы будем использовать функции для манипуляции с деревом DOM такие как appendChild, createElement, createTextNode.

итак, пусть у нас есть такой HTML код:

<div id="DOMTree">
<table border="1" cellpadding="5">
<tbody id="myT">
<tr><td>sample 1</td><td>sample text here...</td></tr>
<tr><td>sample 2</td><td>sample text here...</td></tr>
<tr><td>sample 3</td><td>sample text here...</td></tr>
</tbody>
</table>
</div>

Мы хотим создать функцию, которая будет добавлять ряд (<tr>…</tr>) в конец таблицы. Единственный параметр, который мы будем передавать функции — идентификатор элемента TBODY:

<script type="text/javascript">
var i=3; // будем использовать переменную i просто для имен 'sample 4', 'sample 5', ...
function AddEndRow(tid) {
// создадим элемент <tr>
var myTR=document.createElement('tr');

// создадим первую ячейку (элемент <td>)
var myTD=document.createElement('td');

// у нее будет только один дочерний узел - текстовый
myTD.appendChild(document.createTextNode('sample '+(++i)));

// создаем вторую ячейку и добавляем к ней дочерний текстовый узел 'sample text here 2...'
var myTD2=document.createElement('td');
myTD2.appendChild(document.createTextNode('sample text here 2 ...'));
// теперь обе ячейки мы присоединяем к ряду (tr)
myTR.appendChild(myTD);
myTR.appendChild(myTD2);
// после єтого строку (tr) присоединяем к tbody
document.getElementById(tid).appendChild(myTR);
}
</script>

на рисунке это будет выглядеть примерно так:

1. [myTR]
2. [myTD]
3. [myTD] | -> 'sample '+(++i)
4. [myTD2]
5. [myTD2] | -> 'sample text here 2...'
6. [myTR] | -> [myTD]
7. [myTR] | -> [myTD]
              | -> [myTD2]
8. [tid] (tbody) | -> first row of our table
                      | ....
                      | -> [myTR]

Теперь добавим кнопку, кликая по которой мы будем вызывать нашу функцию:

<form name="" action="" method="">
<input type="button" value="Add row" onClick="return AddEndRow('myT');">
</form>

Нажмите на кнопку и увидите как новый ряд добавляется в конец таблицы 🙂
Все работает прекрасно во всех браузерах (тестировал на FF 1.5, Safari 3, Opera 9, IE 6+)

Теперь создадим функцию для удаления последнего ряда.

function DelLastRow(tid) {
// myTbl -> ссылка на наш Tbody
var myTbl=document.getElementById(tid);
// идем к последнему дочернему элементу tbody - то есть к последнему ряду
var deltr=myTbl.lastChild;
// удаляем этот последний ряд
myTbl.removeChild(deltr);
}

Добавим кнопку в HTML:

<input type="button" value="Delete last row" onClick="return DelLastRow('myT');">

Попробуйте :). Вас ожидает небольшой сюрприз в Safari и Firefox. Вам надо нажать дважды на кнопку, чтоб удалить ряд, а в Opera и Internet Explorer все работает хорошо. Также заметьте, что ряды, которые добавлены используя нашу функцию AddEndRow удаляются с первого клика во всех браузерах. Почему? Завтра я вам расскажу… 😉
продолжение следует

Запись опубликована on 20.05.2008 at 23:53 and is filed under JavaScirpt. Вы можете читать комментарии, используя RSS-ленту. Вы можете оставить комментарий, или отправить трекбек с Вашего сайта.