Discussion :

[kaisser]

Bonjour tout le monde,

En fait mon probl�me est que j'ai une table d�j� rempli, je voulais faire �a:
quand je s�lectionne(je clik) sur une ligne , je dois r�cup�rer cette ligne(tr) ainsi que les cellules(td) et l'ajouter � une autre table .

Au d�but j'ai voulu r�cup�rer la valeur du td mais je n'y arrive pas, je me demande si je pourrais ajouter directement la ligne (tr) � ma nouvelle table, si oui alors s'il vous plait souffle la moi parce que je beau cherch� comment faire �a.

Merci d'avance

[E.Bzz]

Bonjour,
pour l'ajout, la r�ponse est dans la FAQ.
Pour la ligne � supprimer, tu peux soit la masquer (en passant sa propri�t� CSS "display" � "none"), soit la supprimer vraiment

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

document.getElementById('table').deleteRow(xxx)

A+

[le_chomeur]

Sinon j'aurais clonner la ligne puis ins�rer :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

montableau.appendChild(ligneClone);

[E.Bzz]

Oui, mais l'avantage du inserRow() est qu'il permet de d�finir une position d'insertion (si besoin, et est-ce le cas ? ). Pour le appendChild(), c'est plus tordu

A+

[le_chomeur]

lol mais non mais non , a la place du appendChild tu remplaces par un bon vieux insertBefore

[E.Bzz]

a la place du appendChild tu remplaces par un bon vieux insertBefore

C'est � ce dernier que je pensais en fait
Ce que je voulais dire c'est que �a risque d'obliger � parcourir le tableau pour identifier l'�l�ment "avant lequel ins�rer" la ligne ...
Mais tout �a n'est que supposition

A+

[le_chomeur]

lol ok ok one point ^^

[Gsnalf]

http://www.jsfiddle.net/UtT2P/4/
HTML :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<table id="entryTable" onclick="tableClick(event)">
    <caption>
        Entry Table
    </caption>
    <thead>
        <tr>
            <th>type</th>
            <th>action</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>chien</td>
            <td>whoua whoua</td>
        </tr>
         <tr>
            <td>chat</td>
            <td>miaou</td>
        </tr>
         <tr>
            <td>canard</td>
            <td>coincoin</td>
        </tr>
    </tbody>
</table>
 
<table id="incomingTable">
     <caption>
        Incoming Table
    </caption>
    <tbody>
 
    </tbody>
</table>

CSS :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
table, td, th {border:1px solid black;}
td, th {padding:2px;}
#entryTable, #incomingTable {float:left;width:200px;}

JS:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
function tableClick(evt) {
    //recuperation de l'element cliqué
    evt = evt || window.event;
    var target = evt.srcElement || evt.target;
 
    //récupération du bon TR
    while(target.parentNode && target.nodeName!='TR')
        target = target.parentNode;
 
    // si le TR existe et que le parent du TR est un Tbody, on fait quelque chose, sinon rien. cela permet de protéger les TR qui se trouvent dans un Thead et Tfoot.
    if(target.nodeName=='TR' && target.parentNode.nodeName=='TBODY') {
     document.getElementById('incomingTable').tBodies[0].appendChild(target.cloneNode(true));
    }
}

[kaisser]

Ouai merci ca ca marche bien ,

mais en fait moi ce que je voulais faire c'est que quand je click sur un bouton ajouter que l'�venement va se declencher.

donc pour recuper la ligne selectionner , je fais :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

 <table  onclick="selection(event)">

et dans la fonction javascript selection(event) je remplace evenementcourant(qui est une variable globale ) par event.

puis j'ai un bouton Ajouter qui declenche "Ajouter()" dont � l'int�rieur j'ai :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
 
evt = evenementcourant || window.event;
    var target = evt.srcElement || evt.target;
 
    //récupération du bon TR
    while(target.parentNode && target.nodeName!='TR')
        target = target.parentNode;
 
    // si le TR existe et que le parent du TR est un Tbody, on fait quelque chose, sinon rien. cela permet de protéger les TR qui se trouvent dans un Thead et Tfoot.
    if(target.nodeName=='TR' && target.parentNode.nodeName=='TBODY') {
     document.getElementById('incomingTable').tBodies[0].appendChild(target.cloneNode(true));
    }

je vois pas l� ou il y a le probl�me

merci

[kaisser]

En fait j'ai pu r�soudre mon probl�me mais le plus grand probl�me c'est que dans mon second tableau je peux ajouter 2lignes identiques.

Je cherche un moyen pour v�rifier si la ligne qu'on veut ajouter n'existe pas d�j� dans le tableau.

merci

[le_chomeur]

quand tu va cloner ta ligne, tu peux l'ajouter dans un tableau , et v�rifier si elle n'est pas d�j� dedans :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
var ligneAAjouter = target.cloneNode(true);
var ajouterLigne = true ;
for(var i = 0, l = tableauLigne.length ; i < l ; i++){
if(tableauLigne[i] == ligneAAjouter ){
ajouterLigne = false;
break;
}
}
if(ajouterLigne){
tableauLigne.push(ligneAAjouter);
//ET ICI tu ajoutes la ligne au tableau :)
}

[kaisser]

Merci beaucoup le chomeur,
En fait ajouter une ligne � un tableau ca n'a pas march� , mais j'ai pu ajouter le numero de la ligne dans le tableau et comme ca je compare le numero de la ligne r�cup�r�e avec les numeros qui existent dans le tableau.

ca marche bien,

merci beaucoup