Recuperer une ligne selectionée et l'ajouter à une autre table

Version imprimable

04/04/2010, 12h34
kaisser

Recuperer une ligne selectionée et l'ajouter à une autre table

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
06/04/2010, 11h17
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:

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

A+
06/04/2010, 11h56
le_chomeur

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

Code:

montableau.appendChild(ligneClone);
06/04/2010, 11h59
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 ? :koi: ). Pour le appendChild(), c'est plus tordu ;)

A+
06/04/2010, 12h01
le_chomeur

lol mais non mais non , a la place du appendChild tu remplaces par un bon vieux insertBefore ;)
06/04/2010, 12h05
E.Bzz

Citation:

Envoyé par le_chomeur

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

C'est à ce dernier que je pensais en fait :lol:
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 :mrgreen:

A+
06/04/2010, 12h06
le_chomeur

lol ok ok one point ^^

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

Code:

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:

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

JS:

Code:

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

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:

<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:

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

06/04/2010, 18h00
kaisser

l'unicité de la ligne

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

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:

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

15/04/2010, 10h06
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