Trouver les td de ma table

Version imprimable

Bonjour je voulais prendre la value de mes tr + mes td , le probleme et quil me sort que le premier td

voici mon code :

Code:

1
2
3
$('.add_text_image').click(function(){	
	$('#template tbody:last').append('<tr class="edit"><td style="width:350px; border:1px dashed black; padding:5px;" ><div class="content">insérer du texte </div></td><td style="width:350px;border:1px dashed black;padding:5px;"><div class="content">insérer une image</div></td></tr>');
});

(sa rajoute 2 td )

et la je veux les extraire :

Code:

1
2
3
4
5
6
$( "#valider" ).click(function(){
        $( "tbody" ).find('tr').each(function( index, element ){
             var td=($(this).find('td .content').html());   
              console.log('tr index = '+ index+' '+td);
        });
});

merci a vous

23/09/2014, 11h19
Bovino

C'est clairement expliqué dans la doc :

Citation:

If the selector expression matches more than one element, only the first match will have its HTML content returned.
23/09/2014, 11h27
dknafoweb

comment je fait alors ?
merci
23/09/2014, 11h28
Franck.H

Bin t'es bon pour faire deux boucles imbriquées, une qui parcours les tr et une autre les td du tr en cours.
23/09/2014, 11h38
Bovino

Ouais, enfin en même temps, la première boucle, elle est pas franchement d'une utilité transcendante ! :aie:
23/09/2014, 11h41
Franck.H

Par soucis de lisibilité et compréhension du code des fois je préfère mais je débute aussi plus ou moins en jQuery donc bon :aie:

jais essayer comme sa mais jais pas "lindex" du td

Code:

1
2
3
4
5
6
7
8
9
	$( "#valider" ).click(function() 
	{
		$( "tbody" ).find('tr').each(function( index, element ) 
		{
			 var td=($(this).find('td .content').text());	
			 console.log('tr index = '+ index+' '+td);
 
		});
	});

vous pouviez m aidez ?
merci

23/09/2014, 15h22
devyan

Bonjour,

Contrairement à html(), text() renvoie bien le contenu de tous les éléments mais pas le HTML, seulement les textes :)

Par contre si tu relis les réponses précédentes, on te parle de boucles sur chaque élément de ta sélection.
En regardant ton code, je vois que tu sais comment faire une boucle ;)

Bonsoir

Exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<button class="add_text_image">Ajouter</button>
<button id="valider">Valider</button>
 
<table id="template">
    <tbody>
        <tr>
            <td>Un texte</td>
            <td>Un autre texte</td>
        </tr>
        <tr>
            <td>Hello!</td>
            <td>Bonjour !</td>
        </tr>
    </tbody>
</table>

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
35
36
37
38
39
40
41
42
43
$( function(){ // forme abrégée de $(document).ready(function(){
 
    $( '.add_text_image' ).on( "click", function(){  
        $( '#template tbody' ).append(
            '<tr class="edit">' +
                '<td style="width:350px; border:1px dashed black; padding:5px;" >' +
                    '<div class="content">insérer du texte </div>' +
                '</td>' +
                '<td style="width:350px;border:1px dashed black;padding:5px;">' +
                    '<div class="content">insérer une image</div>' +
                '</td>' +
             '</tr>' );
    });
 
    $( "#valider" ).on( "click", function(){
        var Obj = {},
            tmp = [];
 
        $( "#template tbody tr" ).each( function( i, tr ){
 
            // debug, console, touche F12
            // console.log( i, tr );
 
            $( "td", tr ).each( function( j, td ){
 
                // debug, console, touche F12
                // console.log( j, td );
 
                tmp.push( $( td ).text() );
            });
 
            Obj[ i ] = tmp.concat(); // copie de l'array
 
            tmp = []; // vide l'array temporaire
        });
 
        // exemple, 3e tr, texte du 2e td
        // Attention numérotation de 0 à n
 
        console.log( Obj[ 2 ][ 1 ] );
    });
 
});