-
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);
}