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