HTML DOM, JavaScript для добавления/удаления рядов таблицы (часть 1)
posted in JavaScirpt |Я надеюсь, что вам известно о DOM. Если нет, то рекомендую вначале немного ознакомиться с этой статьей.
Мы попробуем написать JavaScirpt код для добавления/удаления рядов в таблице без использования DHTML функций (addRow, addCell и др.), мы будем использовать функции для манипуляции с деревом DOM такие как appendChild, createElement, createTextNode.
итак, пусть у нас есть такой HTML код:
[html]
| sample 1 | sample text here... |
| sample 2 | sample text here... |
| sample 3 | sample text here... |
[/html]
Мы хотим создать функцию, которая будет добавлять ряд (<tr>...</tr>) в конец таблицы. Единственный параметр, который мы будем передавать функции - идентификатор элемента TBODY:
[javascript]
[/javascript]
на рисунке это будет выглядеть примерно так:
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]
Теперь добавим кнопку, кликая по которой мы будем вызывать нашу функцию:
[html]
[/html]
Нажмите на кнопку и увидите как новый ряд добавляется в конец таблицы 
Все работает прекрасно во всех браузерах (тестировал на FF 1.5, Safari 3, Opera 9, IE 6+)
Теперь создадим функцию для удаления последнего ряда.
[javascript]
function DelLastRow(tid) {
// myTbl -> ссылка на наш Tbody
var myTbl=document.getElementById(tid);
// идем к последнему дочернему элементу tbody - то есть к последнему ряду
var deltr=myTbl.lastChild;
// удаляем этот последний ряд
myTbl.removeChild(deltr);
}
[/javascript]
Добавим кнопку в HTML:
[html]
[/html]
Попробуйте . Вас ожидает небольшой сюрприз в Safari и Firefox. Вам надо нажать дважды на кнопку, чтоб удалить ряд, а в Opera и Internet Explorer все работает хорошо. Также заметьте, что ряды, которые добавлены используя нашу функцию AddEndRow удаляются с первого клика во всех браузерах. Почему? Завтра я вам расскажу... 
продолжение следует