Demo - Manipulation des tables

Créer ou re-créer une table → voir la fonction javascript
function createTable (o, id, nbrows, nbcells) {
	if (typeof id=='string' && id !='') {
		var table = document.getElementById(id);
		if (table) {
			table.parentNode.removeChild(table);
		}
	}
	var i, j, row, cell, h;
	table = document.createElement('TABLE');
	if (id != '') {
		table.id = id;
	}
	//on crée le titre de la table
	h = table.createCaption();
	h.appendChild(document.createTextNode('le titre de la table'));
	//on crée les lignes et les cellules du corps de la table
	for (i = 0; i < nbrows; i += 1) {
		row = table.insertRow(-1);
		for(j = 0; j < nbcells; j += 1) {
			cell = row.insertCell(-1);
			cell.appendChild(document.createTextNode('rows[' +i + '].cells[' + j +']')); 
			//ajouter pour montrer que la cellule a bien était créée
		}
	}
	//on crée les entêtes de la table
	h = table.createTHead();
	row = h.insertRow(-1);
	for(i = 0, cell; i < nbcells; i += 1){
		cell = row.insertCell(-1);
		cell.appendChild(document.createTextNode('entete ' + i)); 
		//ajouter pour montrer que la cellule a bien était créée
	}
	//on crée les bas de page de la table
	h = table.createTFoot();
	row = h.insertRow(-1);
	for(i = 0, cell; i < nbcells; i += 1){
		cell = row.insertCell(-1);
		cell.appendChild(document.createTextNode('bas ' + i)); 
		//ajouter pour montrer que la cellule a bien était créée
	}
	o.appendChild(table);
}
utiliser comme suit :
createTable(document.getElementById('demo'), 'latable', 5,5);
ajouter une ligne en 3ème position → voir la fonction javascript (n'hésitez pas cliquer plusieurs fois)
function addRow (o, rowIndex) {
	if (o) {
		rowIndex = (o.rows.length < rowIndex || rowIndex < -1) ? -1 : rowIndex;	
		var tr = o.insertRow(rowIndex);
		for (var i=0, c, l=o.rows[0].cells.length; i < l; i += 1) {
			c = tr.insertCell(-1);
			c.appendChild(document.createTextNode( 'rows[' + rowIndex + '].cells[' + i +']' )); 
			//ajouter pour montrer que la cellule a été créée
		}
	}
}
utiliser comme suit :
addRow(document.getElementById('latable'), 2);
effacer la 3ème ligne du la table → voir la fonction javascript (n'hésitez pas cliquer plusieurs fois)
function removeRow (o, rowIndex) {
	if (o) {
		if (o.rows.length < rowIndex && rowIndex < -1) {
			o.deleteRow(rowIndex);
		} else {
			alert("there's no rows with index " + rowIndex + " in your " + o.nodeName + " tag"); 
			//ajouter pour montrer l'erreur
		}
	}
}
utiliser comme suit :
removeRow(document.getElementById('latable').getElementsByTagName('tbody')[0], 2);
effacer la 3ème ligne du corps (tbody) de la table → voir la fonction javascript (n'hésitez pas cliquer plusieurs fois)
utiliser comme suit :
var z = document.getElementById('latable');
if (z) {
	removeRow(z.getElementsByTagName('tbody')[0], 2);
}