динамическая работа с таблицами

1. создание;
2. управление атрибутами;
3. добавление/удаление столбцов и строк;
4. перемещение строк;
5. заполнение ячеек

1. создание таблицы

var newElem=document.createElement('table'); 
document.body.appendChild(newElem); 

2. управление атрибутами

var newElem=document.createElement('table'); 
newElem.setAttribute('id','tl');
newElem.setAttribute('width','500');
newElem.setAttribute('border','1'); 
document.body.appendChild(newElem); 

var newElem=document.createElement('table'); 
newElem.id='tl';
newElem.width=500;
newElem.border=1; 
document.body.appendChild(newElem); 

document.body.innerHTML='';  

3. добавление/удаление столбцов и строк и 4. перемещение строк

    var newElem=document.createElement("table");
	    
    var newRow=newElem.insertRow(0);
    var newCell = newRow.insertCell(0);
    newCell.width="200";
    newCell.innerHTML="строка 1 столбец 1";
    
    var newCell = newRow.insertCell(1);
    newCell.width="400";
    newCell.innerHTML="строка 1 столбец 2";
    
    var newRow=newElem.insertRow(1);
    var newCell = newRow.insertCell(0);
    newCell.width="200";
    newCell.innerHTML="строка 2 столбец 1";
    
    var newCell = newRow.insertCell(1);
    newCell.width="400";
    newCell.innerHTML="строка 2 столбец 2";
    
    document.body.appendChild(newElem);

var dt = document.getElementById("t1");

function delete_tr(obj) {
    var num_tr=obj.parentNode.sectionRowIndex;
    dt.deleteRow(num_tr)
}
function up_tr(obj) {
    var num_tr=obj.parentNode.sectionRowIndex;
    if (num_tr!=0) dt.moveRow(num_tr, num_tr-1);
}
function down_tr(obj) {
    var num_all_tr=obj.parentNode.parentNode.childNodes.length;
    var num_tr=obj.parentNode.sectionRowIndex;
    if (num_tr!=num_all_tr-1) dt.moveRow(num_tr, num_tr+1);
} 

5. заполнение ячеек

document.getElementById('идентификатор').innerHTML = 'something';

дополнительно

var tables = document.getElementsByTagName("table");
for ( var t = 0; t < tables.length; t++ ) 
{ ... }

var td_cells=document.getElementById("tl").cells;
for (var i=0; i < td_cells.length; i++)
alert(td_cells[i].innerHTML); 

var t = document.getElementsById('t1');
var rows = t.getElementsByTagName("tr");
for ( var i = 1; i < rows.length; i += 2 )      
rows[i].className = "odd";

• Tweet

Комментарии:

Спасибо, очень помогло! И про рекламу незабыл!

Эмм...я мож мало еще че погимаю, но я знаю только функцию getElementById, а не getElementSById, без с все прекрасно работает =)

Эмм...я мож мало еще че погимаю, но я знаю только функцию getElementById, а не getElementSById, без с все прекрасно работает =)

Интересно, но у меня почему-то не работает в IE? Если интересно, здесь (http://abloga.net.ru/?p=42) есть примеры и демо. Везде работает. Может стоить подправить...

Мде А в файрфоксе moveRow не работает хуйня этот файрфокс

класный сайт

Почему то не работает setAttribute("bgcolor","#ff0000) для ячеек таблицы TD, созданных с помощью createElement('TD') в Internet Explorer, вообще не могу никак там цвет сделать в таблице.... (
ФФ и ОПера все номрально.

Спасибо за сайт!
Очень помог разобраться с форматированием таблиц.
Незнаю, ошибка ли это, но вот тут 's' в середине кода лишняя:
var t = document.getElementsById('t1');
и еще, не разобравшись с:
rows[i].className = "odd";
я выбрал способ:
rows[i].style.background="#DDDDFF";

добрый день,у меня есть форма хтмл, при заполнении которой,после нажатия кнопки, данные идут в базу, а из базы информация поступает в таблицу хтмл, которая расположена ниже этой формы.А мне надо чтобы информация обновлялась динамически по ходу внесения данных в форму, т е еще до нажатия кнопки, подскажите пожалуйста, может мне надо связать таблицу с формой напрямую(не через базу) или может есть какой то другой способ? и стоит ли мне переписать все вычисления с пхп на яваскрипт(для вызова onkeyup)? заранее спасибо!

от кого: