HTML DOM, JavaScript для добавления/удаления рядов таблицы (часть 1)
posted in JavaScirpt |Я надеюсь, что вам известно о DOM. Если нет, то рекомендую вначале немного ознакомиться с этой статьей.
Мы попробуем написать JavaScirpt код для добавления/удаления рядов в таблице без использования DHTML функций (addRow, addCell и др.), мы будем использовать функции для манипуляции с деревом DOM такие как appendChild, createElement, createTextNode.
итак, пусть у нас есть такой HTML код:
Мы хотим создать функцию, которая будет добавлять ряд (<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]
Теперь добавим кнопку, кликая по которой мы будем вызывать нашу функцию:
Нажмите на кнопку и увидите как новый ряд добавляется в конец таблицы 
Все работает прекрасно во всех браузерах (тестировал на 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 удаляются с первого клика во всех браузерах. Почему? Завтра я вам расскажу... 
продолжение следует