Gestion dynamique des Tables HTML en JavaScript .pdf



Nom original: Gestion dynamique des Tables HTML en JavaScript.pdf
Titre: Developpement Web - client side
Auteur: Abdallah EL Asmar

Ce document au format PDF 1.5 a été généré par Microsoft® Office Word 2007, et a été envoyé sur fichier-pdf.fr le 15/02/2015 à 23:43, depuis l'adresse IP 92.62.x.x. La présente page de téléchargement du fichier a été vue 704 fois.
Taille du document: 438 Ko (9 pages).
Confidentialité: fichier public


Aperçu du document


Développement Web – HTML & JavaScript
Abdallah EL Asmar
Gestion dynamique de table HTML en JavaScript
JavaScript permet la gestion dynamique des Tables HTML à travers un ensemble d’objets : Table,
TableRow, TableData, …. Chacun de ces objets possède un ensemble de propriétés et de méthodes
permettant l’accès aux attributs de la balise HTML TABLE et aux balises associées à TABLE.
Considérons la page suivante :

<html>
<head>
<title> Table</title>
<script type="text/javaScript">
</script>
</head>
<body>
<center>
<H1>Facture</H1>
<HR>
<form name="form1">
<table id="maTable" border="1" width="80">
<thead>
<tr > <th >Item</th><th>Quantite</th> <th>Prix</th><th>Montant</th> </tr>
</thead>
<tbody> </tbody>
</table>
<p> <input type ="text" name="item" size= "12" maxlength="8">
< input type ="text" name="quantite" size= "12" maxlength="8">
< input type ="text" name="prix" size= "12" maxlength="8">
</p>
<p> < input type ="button" value ="Inserer ligne" onClick="inserer()">
< input type ="button" value ="Supprimer ligne" onClick="supprimer()">
< input type ="button" value ="Inserer Foot" onClick="insererFoot()">
< input type ="button" value ="Colorier lignes" onClick="colorier()">
</p>
</form>
</center>
</body></html>
On va définir les différentes fonctions associées aux boutons et les insérer entre les balises :
<script type="text/javaScript"> et </script>
Tout d’abord, il est nécessaire de définir l’attribut type = "text/javaScript" de la balise script.

1

Développement Web – HTML & JavaScript
Abdallah EL Asmar
Gestion dynamique de table HTML en JavaScript

Insérer une ligne
La table ne contient qu’une header (entête), on veut insérer de lignes dans cette table à partir des
valeurs saisies dans les « Input text » .
function inserer(){
var tableau = document.getElementById("maTable");
var ligne = tableau.insertRow(-1);
var cell = ligne.insertCell(0); cell.innerHTML = form1.item.value;
cell = ligne.insertCell(1); cell.innerHTML = form1.quantite.value;
cell = ligne.insertCell(2); cell.innerHTML = form1.prix.value;
cell = ligne.insertCell(3);
cell.innerHTML = parseInt(form1.quantite.value)*parseInt(form1.prix.value);
}

 La première étape s’agit d’obtenir l’objet table :
var tableau = document.getElementById("maTable");

La variable tableau représente un objet Table de javascript ; cet objet possede plusieurs
propriétés (rows, align, cellSpacing, tFoot, tbodies, …) et plusieurs méthodes (insertRow(),
deleteRow(), createCaption(), createTFoot(), deleteTFoot(),….).
 La deuxième étape s’agit d’ajouter une ligne à la table :
var ligne = tableau.insertRow(-1);

La méthode insertRow() prend en paramètre l’indice de la ligne à insérer et retourne un objet
TableRow (ligne de table).
La valeur de l’indice doit être : 0 <= indice <= N, tel que 0 est l’indice de la première ligne et
N est le nombre de lignes de tableaux (N-1 est l’indice de la dernière ligne). Alors pour
ajouter une ligne à la fin de la table, on doit trouver N et l’utiliser avec insertRow() :
tableau.insertRow(N) ou on peut utiliser tableau.insertRow(-1) tel que -1 représente la
fin de la table.
Pour trouver le nombre de lignes :
var tabLignes = tableau.rows;
var N = tabLignes.length ;

rows est une propriété de l’objet Table, elle retourne un tableau d’objets TableRow qui
correspondent aux lignes de la table HTML.
length : nombre de lignes du tableau
 La troisième étape s’agit d’ajouter des cellules (TD) à la ligne insérée et d’associer des
valeurs à ces cellules.
var cell = ligne.insertCell(0);
cell.innerHTML = form1.item.value;

La méthode insertCell() prend en paramètre l’indice de la cellule à insérer et retourne un
objet TableData (cellule de table). Comme dans le cas de insertRow(),la valeur de l’indice
doit être : 0 <= indice <= N, tel que 0 est l’indice de la première cellule et N est le nombre de
cellules de la ligne.

2

Développement Web – HTML & JavaScript
Abdallah EL Asmar
Gestion dynamique de table HTML en JavaScript
Dans l’exemple, on a commencé par l’indice 0 puis 1, 2 et 3.On peut aussi utiliser la méthode
insertCell(-) pour ajouter une cellule à la fin de la ligne ; puisque la ligne est vide alors il
s’agit de l’index 0, si on utilise insertCell(-1) deuxième fois, alors ça sera la deuxième cellule
d’indice 1… .
La propriété innerHTML permet d’obtenir ou de modifier le contenu entre la balise ouvrante
et la balise fermante d’un élément HTML.
cell.innerHTML = form1.item.value;

Dans l’exemple, on a associé la valeur de <input type ="text" name="item" size= "12"
maxlength="8"> au contenu de la cellule.
Supprimer une ligne
Indiquer un numéro de ligne et le supprimer.
function supprimer(){
var tableau = document.getElementById("maTable");
var nbLignes = tableau.rows.length;
var dernier = nbLignes – 1 ;
n = prompt("No. de ligne à supprimer?\nEntrez une valeur entre 1 et " +
dernier));
if (n < 1 || n > dernier) {
alert("Erreur, valeur incorrecte");
return;
}
tableau.deleteRow(n);
}

La méthode deleteRow() prend en paramètre l’indice de la ligne à supprimer.
La valeur de l’indice doit être : 0 <= indice <= N-1, tel que 0 est l’indice de la première ligne et
N est le nombre de lignes de tableaux (N-1 est l’indice de la dernière ligne).
var tableau = document.getElementById("maTable"); // obtenir l’objet Table
var nbLignes = tableau.rows.length; // nombre de lignes de la table
var dernier = nbLignes – 1 ; // numéro de la dernière ligne

Pour éviter de supprimer l’entête de la table, on demande à l’utilisateur de saisir une valeur >= 1 ;
et cette valeur doit être <= au numéro de la dernière ligne.

Utilisation de sections de la table HTML
Les lignes de la table peuvent être regroupées dans une section en-tête de la table, une section pied
de la table, et une ou plusieurs sections corps de table, en utilisant respectivement les éléments
THEAD, TFOOT et TBODY. Cette organisation permet de gérer les lignes du corps de la table,
indépendamment de l'en-tête et du pied de la table.
Quand ils sont présents THEAD, TFOOT et TBODY, chaque élément contient un groupe de
lignes. Chaque groupe de lignes doit contenir au moins une ligne, qui est définie par l'élément TR.

3

Développement Web – HTML & JavaScript
Abdallah EL Asmar
Gestion dynamique de table HTML en JavaScript

Cet exemple illustre l'ordre et la structure des en-têtes, pieds et corps des tables.
<TABLE>
<THEAD>
<TR> ...informations d'en-tête...
</THEAD>
<TFOOT>
<TR> ...informations de pied...
</TFOOT>
<TBODY>
<TR> ...première ligne des données du bloc 1...
<TR> ...seconde ligne des données du bloc 1...
</TBODY>
<TBODY>
<TR> ...première ligne des données du bloc 2...
<TR> ...deuxième ligne des données du bloc 2...
<TR> ...troisième ligne des données du bloc 2...
</TBODY>
</TABLE>

L'élément TFOOT doit
survenir
avant
un
élément TBODY dans
une
définition
d'élément TABLE.
Pour accéder en JavaScript aux différentes sections, on utilise les attributs et les méthodes
suivantes de l’objet Table :
Retourne l’objet qui correspond à l’entête (section thead) de la table HTML ou
null s’il n’existe pas.
tFoot
Retourne l’objet qui correspond au pied (section tfoot) de la table HTML ou null
s’il n’existe pas.
tBodies
Retourne un tableau d’objets tBody correspond aux sections tbody de la table
HTML.
createTHead() Créer l’entête (section thead) de la table HTML
deleteTHead() Supprimer l’entête (section thead) de la table HTML
createTFoot() Créer le pied (section tfoot) de la table HTML
deleteTFoot() Supprimer le pied (section tfoot) de la table HTML
tHead

Il n’y a pas des méthodes pour créer ou supprimer une section tbody (au moins à ce niveau, on
peut utiliser des méthodes DOM pour créer un tbody) ; alors on peut définir une ou plusieurs
sections tbody au niveau de code HTML et par suite on peut insérer et supprimer des lignes
d’une section.
Dans l’exemple, on a définit en HTML une section <tbody> </tbody>, cette section sera
référencée par :
var tableau = document.getElementById("maTable");
var corps = tableau.tBodies; // tableau de toutes les sections tbody

L’objet corps[0] correspond au première section tbody, on peut ajouter ou supprimer des lignes
de cette section.
var ligne = corps[0].insertRow(-1); // ajouter une ligne à la fin de la 1ère section tbody

4

Développement Web – HTML & JavaScript
Abdallah EL Asmar
Gestion dynamique de table HTML en JavaScript
corps[0].deleteRow(0) ; // supprimer la ligne d’index 0 de la 1ère section tbody
var nbLignes = corps[0].rows.length ; // nombre de lignes de 1ère section tbody

Alors, on peut redéfinir les fonctions inserer() et supprimer() de la façon suivante :
function inserer(){
var tableau = document.getElementById("maTable");
var corps = tableau.tBodies;
var ligne = corps[0].insertRow(-1);
………….
}
function supprimer(){
var tableau = document.getElementById("maTable");
var corps = tableau.tBodies;
var nbLignes = corps[0].rows.length;
var dernier = nbLignes – 1 ;
n = prompt("No. de ligne à supprimer?\nTapez une valeur entre 0 et" + dernier));
if (n < 0 || n > dernier) {
alert("Erreur, valeur incorrecte");
return;
}
corps[0].deleteRow(n);
}

Insérer une ligne Foot
Insérer une ligne Footer à la fin de la table pour calculer le montant total de la facture.
function insererFoot(){
var tableau = document.getElementById("maTable");
if (tableau.tFoot == null){
var vfoot = tableau.createTFoot();
var ligne = vfoot.insertRow(0);

}

}

cell =ligne.insertCell(0); cell.colSpan=3; cell.innerHTML ='Total facture';
var total = 0;
var cellules ;
for (var i =1; i <tableau.rows.length -1; i++){
cellules = tableau.rows[i].cells;
total = total + parseInt(cellules[3].innerHTML);
}
cell =ligne.insertCell(1); cell.innerHTML =total;

La fonction vérifie d’abord si la section tfoot existe, si non, elle crée la section tfoot par
l’application de la méthode createFoot() qui retourne un objet tFoot.

5

Développement Web – HTML & JavaScript
Abdallah EL Asmar
Gestion dynamique de table HTML en JavaScript
var vfoot = tableau.createTFoot(); //vfoot est un objet tFoot.
var ligne = vfoot.insertRow(0); //insérer la 1ère ligne dans vfoot
cell =ligne.insertCell(0); //insérer la 1ère cellule de cette ligne
cell.colSpan=3; // fusionner 3 colonnes pour cette cellule
cell.innerHTML ='Total facture'; //associer la chaine ‘Total facture à cette cellule

La boucle for sert à parcourir la colonne « Montant » pour calculer la somme de montants. La
boucle parcourt toutes les lignes à l’exception de 1ère ligne (l’entête indice 0) et la dernière
ligne (footer).
cellules = tableau.rows[i].cells;

L’attribut cells de l’objet TableRow retourne un tableau d’objets TableData de la ligne
correspondante à tableau.rows[i].
cellules[3].innerHTML retourne le contenu de la cellule d’indice 3.
Remarque 1
Si on suppose qu’on peut ajouter ou supprimer des lignes après l’insertion de footer, alors il
faut recalculer le montant total. Pour tenir compte à ces modifications, on peut à la fin de
chacune des fonctions inserer() et supprimer(), supprimer le footer et appler à nouveau la
fonction insererFoot() ; la fonction inserer() devient :
function inserer(){
var tableau = document.getElementById("maTable");
var ligne = tableau.insertRow(-1);
var cell = ligne.insertCell(0); cell.innerHTML = form1.item.value;
cell = ligne.insertCell(1); cell.innerHTML = form1.quantite.value;
cell = ligne.insertCell(2); cell.innerHTML = form1.prix.value;
cell = ligne.insertCell(3);
cell.innerHTML = parseInt(form1.quantite.value)*parseInt(form1.prix.value);

}

if (tableau.tFoot != null){
tableau.deleteTFoot();
insererFoot();
}

Même code doit être ajouté à la fin de la fonction supprimer().
Remarque 2
Si on a utilisé la section tbody pour insérer et supprimer des lignes dans les fonctions inserer() et
supprimer(), alors on peut modifier la fonction insérerFoot() de la façon suivante :
function insererFoot(){
…………………..
var total = 0;
var cellules ;

var corps = tableau.tBodies;
for (var i = 0; i < corps[0].rows.length; i++){
cellules = corps[0].rows[i].cells;
total = total + parseInt(cellules[3].innerHTML);
}
cell =ligne.insertCell(1); cell.innerHTML =total;

}

}

6

Développement Web – HTML & JavaScript
Abdallah EL Asmar
Gestion dynamique de table HTML en JavaScript

Colorier la table
La fonction applique des couleurs au background des lignes de la table :
function colorier(){
var tableau = document.getElementById("t1");
tableau.rows[0].style.backgroundColor ="#4B77F0";
tableau.tFoot.rows[0].style.backgroundColor ="#F0594B";
var corps = tableau.tBodies;
var lignes = corps[0].rows;
var longueur = lignes.length;
for (var i=0; i< longueur; i++){
if(i % 2 == 0) {
lignes[i].style.backgroundColor = "#3EDADA"; }
else {
lignes[i].style.backgroundColor = "#14B0CF"; }
}
}

Les objets JavaScript Table, TableRow, TableData possedent l’attribut bgColor qui permet d’obtenir
ou de modifier la couleur de background, mais cet attribut ne fonctionne si un css est utilisé, de plus
il est incompatible avec html5. Pour cela, on a utilisé l’objet style qui possède plusieurs attributs
(color, backgroundColor, font, fontSize, width, textAlign, margin, border, borderColor, ……)

7

Développement Web – HTML & JavaScript
Abdallah EL Asmar
Gestion dynamique de table HTML en JavaScript

Table Object - http://www.w3schools.com/jsref/
Collection

Description

rows

Returns a collection of all <tr> elements in a table

tBodies

Returns a collection of all <tbody> elements in a table

Property

Description

align

Not supported in HTML5. Use style.cssFloat instead.
Sets
or returnsin
the
alignment
of a table according
to surrounding text
Not supported
HTML5.
Use style.background
instead.

background
border

Sets
or returnsin
the
background
image of a table
Not supported
HTML5.
Use style.backgroundColor
instead.
Sets
or
returns
the
background
color
of
a
table
Deprecated. Use style.border instead.

caption

Sets
or returns
the width
of the table
border.
Returns
the <caption>
element
of a table

cellPadding

tFoot

Not supported in HTML5. Use style.padding instead.
Sets
or returnsin
the
amount
of style.borderSpacing
space between the cell
border and cell
Not supported
HTML5.
Use
instead.
content
Sets
or returnsin
the
amount of space between the cells in a table
Not supported
HTML5.
Sets
or returnsin
which
outer-borders
(of a table)
that should be
Not supported
HTML5.
Use style.height
instead.
displayed
Sets
or returnsin
the
height of a table
Not supported
HTML5.
Sets
or returnsin
which
inner-borders (between the cells) that should be
Not supported
HTML5.
displayed
in
a
table
Sets
or returns
a description
of the data
in aof
table
Returns
a reference
to the <tfoot>
element
a table

tHead

Returns a reference to the <thead> element of a table

width

Not supported in HTML5. Use style.width instead.
Sets or returns the width of the table

Method

Description

createCaption()

Creates an empty <caption> element and adds it to the table

createTFoot()

Creates an empty <tfoot> element and adds it to the table

createTHead()

Creates an empty <thead> element and adds it to the table

deleteCaption()

Removes the first <caption> element from the table

deleteRow()

Removes a row (<tr>) from the table

deleteTFoot()

Removes the <tfoot> element from the table

deleteTHead()

Removes the <thead> element from the table

insertRow()

Creates an empty <tr> element and adds it to the table

bgColor

cellSpacing
frame
height
rules
summary

8

Développement Web – HTML & JavaScript
Abdallah EL Asmar
Gestion dynamique de table HTML en JavaScript

TableRow Object
Collection

Description

cells

Returns a collection of all <td> or <th> elements in a table row

Property

Description

align

Not supported in HTML5. Use style.textAlign instead.
Sets
or returnsin
the
horizontal
alignment of the content
within a table row
Not supported
HTML5.
Use style.backgroundColor
instead.

bgColor
ch
chOff

Sets
or returnsin
the
background color of a table row
Not supported
HTML5.
Sets
or returnsin
anHTML5.
alignment character for cells in a table row
Not supported

rowIndex

Sets
or returnsin
the
horizontal
offset of theinstead.
ch property
Not supported
HTML5.
Use style.height
Sets
or returns
the height
of aintable
row. collection of a table
Returns
the position
of a row
the rows

sectionRowIndex

Returns the position of a row in the rows collection of a tbody, thead, or tfoot

vAlign

Not supported in HTML5. Use style.verticalAlign instead.
Sets or returns the vertical alignment of the content within a table row

Method

Description

deleteCell()

Deletes a cell from the current table row

insertCell()

Inserts a cell into the current table row

height

TableData Object
Property

Description

abbr

Not supported in HTML5.
Sets
or returnsin
the
value Use
of the
abbr attribute
Not supported
HTML5.
style.textAlign
instead.

align
axis
background
bgColor
cellIndex
ch

Sets
or returnsin
the
horizontal alignment of the content in a data cell
Not supported
HTML5.
Sets
or returnsin
a HTML5.
comma-separated
list of related
data cells
Not supported
Use style.background
instead.
Sets
or returnsin
the
background
image of a data cell instead.
Not supported
HTML5.
Use style.backgroundColor
Sets
or returns
the background
color
of acollection
table
Returns
the position
of a cell in the
cells
of a table row

chOff

Not supported in HTML5.
Sets
or returnsin
anHTML5.
alignment character for a data cell
Not supported

colSpan

Sets
offset
of the
ch property
Sets or
or returns
returns the
the horizontal
value of the
colspan
attribute

headers

Sets or returns the value of the headers attribute

height
noWrap

Not supported in HTML5. Use style.height instead.
Sets
or returnsin
the
heightUse
of astyle.whiteSpace
data cell
Not supported
HTML5.
instead.

rowSpan

Sets
content
in a cell
can be wrapped
Sets or
or returns
returns whether
the valuethe
of the
rowspan
attribute

vAlign

Not supported in HTML5. Use style.verticalAlign instead.
Sets
or returnsin
the
vertical
alignment
of the
content within a cell
Not supported
HTML5.
Use
style.width
instead.

width

Sets or returns the width of a data cell
The objects Table, TableRow and TableData also support the standard properties (id, innerHTML,…),
methods (focus(), click(), blur(),…) and events (onclick, onmouseover, onmouseout,…).

9



Télécharger le fichier (PDF)










Documents similaires


rtgveryb
gestion dynamique des tables html en javascript
reponses mos ppt 2010
microsoft
microsoft word
introjavascript

Sur le même sujet..