Javascript add/remove TD/TR in TABLE

Tue, 12 May 2009 02:56:13 +0200

Манипулирование таблицей:

Для того что бы добавить/удалить строку(ряд) TR есть функция insertRow/deleteRow. Применяется она только к объекту TABLE.
Что бы посчитать количество рядов в таблице, вызываем у объекта TABLE функцию rows.length
Для того что бы добавить/удалить ячейку TD в строке, мы используем insertCell/deleteCell, применяется только к объекту TR.
Что бы посчитать количество колонок в рядке, вызываем у объекта TR функцию cells.length

Рассмотрим простой пример:

function addRow(i) {
	// объект myTable
	var table = document.getElementById('myTable');
	// количество рядов меньше вставляемого ряда - выходим
	var rowz = table.rows.length;
	if (rowz < i+1 && i > 0) 
		{alert("row " + (i+1) + " not exist");return;}
	// вставляем ряд без ячеек
	var row=table.insertRow(i);
	// предполагаем ячеек будет 2
	var countCells = 2;
	// берём количество ячеек со следующего ряда
	if (row.nextSibling != null && rowz > 0) 
		countCells = row.nextSibling.cells.length;
	// нет следующего берём с предыдущего, если есть ряды
	else if (row.previousSibling != null  && rowz > 0) 
		countCells = row.previousSibling.cells.length;
	// в цикле вставляем новые ячейки
	for (var j = 0; j < countCells; j++ ) {
		// вставляем ячейку
		var cell=row.insertCell(j);
		// наполняем ячейку
		cell.innerHTML="new cell " + (j+1) + " from line "+(i+1);
	}
}
function removeRow(i) {
	// объект myTable
	var table = document.getElementById('myTable');
	// нет рядов - выходим
	if (!table.rows.length) 
		{alert("No rows, insert first");return;}		
	// количество рядов меньше удаляемого ряда - выходим
	if (table.rows.length < i+1 ) 
		{alert("row " + (i+1) + " not exist");	return;}
	var row=table.deleteRow(i);
}	
function addCell(i) {
	// объект myTr
	var row = document.getElementById('myTr');	
	// Если номер вставляемой ячейки больше 
	// количества ячеек - выходим
	var rowz = row.cells.length;
	if (rowz < i+1 && i > 0) 
		{alert("cell " + (i+1) + " not exist");	return;}
	// вставляем ячейку
	var cell=row.insertCell(i);
	// наполняем ячейку
	cell.innerHTML="new cell after cell "+(i+1);
}	
function removeCell(i) {
	// объект myTr
	var row = document.getElementById('myTr');	
	// нет ячеек - выходим
	if (!row.cells.length) 
		{alert("No cells, insert first");return;}
	// Если ячейки которую нужно удалить нет - выходим
	if (row.cells.length < i+1 ) 
		{alert("cell " + (i+1) + " not exist");	return;}
	// удаляем ячейку
	var cell=row.deleteCell(i);
}

Посмотреть пример

Комментарии к заметке

Теги:
javascript
html > tags > table > tr > td

Deerua about Coding: последние заметки с тегом «tr»

Javascript add/remove TD/TR in TABLE