Ajouter un ligne à un tableau avec des inputs

Version imprimable

Bonjour,

Sur un formulaire j'ai un tableau avec des champs inputs à remplir, je voudrais pourvoir rajouter des lignes et que les ID des inputs soit modifer avec +1, par exemple nom1 puis nom2, ....

Voici mon tableau :

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
<table id="matable">
	<tr>
    	<td><b>Nom du site</b></td>
        <td><b>Adresse</b></td>
        <td><b>Adresse Suite</b></td>
        <td><b>CP</b></td>
        <td><b>Ville</b></td>
        <td><b>Pays</b></td>
        <td><b>Nom du contact</b></td>
        <td><b>t&eacute;l</b></td>
        <td><b>Fax</b></td>
        <td><b>Mobile</b></td>
        <td><b>E-Mail</b></td>
    </tr>
    <tr>
    	<td><input type="text" id="nomad" name="nomad" /></td>
        <td><input type="text" id="ad1" name="ad1" /></td>
        <td><input type="text" id="ad2" name="ad2" /></td>
        <td><input type="text" id="cp" name="cp" /></td>
        <td><input type="text" id="ville" name="ville" /></td>
        <td><input type="text" id="pays" name="pays" /></td>
        <td><input type="text" id="nomco" name="nomco" /></td>
        <td><input type="text" id="tel" name="tel" /></td>
        <td><input type="text" id="fax" name="fax" /></td>
        <td><input type="text" id="mobile" name="mobile" /></td>
        <td><input type="text" id="email" name="email" /></td>
    </tr>
</table>

Comment puis-je rajouter des lignes en JS ?

Merci

Bonjour,

Voici une solution avec jQuery :

http://jsfiddle.net/8bzo5gfw/

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
<table id="matable">
	<tr>
    	<td><b>Nom du site</b></td>
        <td><b>Adresse</b></td>
        <td><b>Adresse Suite</b></td>
        <td><b>CP</b></td>
        <td><b>Ville</b></td>
        <td><b>Pays</b></td>
        <td><b>Nom du contact</b></td>
        <td><b>t&eacute;l</b></td>
        <td><b>Fax</b></td>
        <td><b>Mobile</b></td>
        <td><b>E-Mail</b></td>
    </tr>
    <tr>
    	<td><input type="text" id="nomad" name="nomad" /></td>
        <td><input type="text" id="ad1" name="ad1" /></td>
        <td><input type="text" id="ad2" name="ad2" /></td>
        <td><input type="text" id="cp" name="cp" /></td>
        <td><input type="text" id="ville" name="ville" /></td>
        <td><input type="text" id="pays" name="pays" /></td>
        <td><input type="text" id="nomco" name="nomco" /></td>
        <td><input type="text" id="tel" name="tel" /></td>
        <td><input type="text" id="fax" name="fax" /></td>
        <td><input type="text" id="mobile" name="mobile" /></td>
        <td><input type="text" id="email" name="email" /></td>
    </tr>
</table>
<button id="add_line">ajouter une ligne</button>

Code:

1
2
3
4
5
6
7
8
9
10
$("#add_line").click(function(){    
   var line = $("#matable tr:eq(1)").clone();
   var nb_line = $("#matable tr").length;
    $(line).find( "td input" ).each(function( index ) { 
       var input = $(line).find( "td input" )[index];
       var id = $(input).attr("id");
       $($(line).find( "td input" )[index]).attr('id', id + nb_line);
    });
    $("#matable").append(line);
});

24/12/2014, 12h31
thecrazyspy

Suite

Cela fonctionne bien sur http://jsfiddle.net mais pas sur mon site, j'ai mis le code dans mon fichier scripts.js mais rien ne ce passe

suite

ça fonctionne comme cela, super merci

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
function insert_ligne(){    
   var line = $("#matable tr:eq(1)").clone();
   var nb_line = $("#matable tr").length;
 
    $(line).find( "td input" ).each(function( index ) { 
       var input = $(line).find( "td input" )[index];
       var id = $(input).attr("id");
       $($(line).find( "td input" )[index]).attr('id', id + nb_line);
    });
 
    $("#matable").append(line);
}

Autre question, si je veux supprimer une ligne ?

24/12/2014, 14h30
NoSmoking

Bonjour,
comme tu as la référence de la ligne ajoutée il te suffit de créer un button qui la remove.

Au passage 'id', id + nb_line est une mauvaise solution si tu désires supprimer des lignes il y a lourd à parier que tu te retrouvera avec des éléments possédant la même ID à un moment ou à un autre, mais as tu besoin des ID d'abord ???
24/12/2014, 14h37
thecrazyspy

Oui pour récupérer les infos des inputs
24/12/2014, 14h44
Golgotha

Oui, il faudrait récupérer l'id de la dernière ligne et faire +1. Sinon ça risque de poser problème effectivement.
24/12/2014, 14h44
thecrazyspy

D'ailleurs quand je fais un $_POST d'une ligne ajouter je n'obtient rien, comment faire ?
24/12/2014, 14h49
Bovino
L'id n'a jamais permis de récupérer les informations liées à un cham, c'est name qui fait ça.
Et du coup, tu n'as pas besoin de valeurs numériques, une syntaxe type tableau PHP fera l'affaire
Code:

1 2 <input name="foo[]" value="bar" /> <input name="foo[]" value="baz" />
Code:

var_dump($_POST['foo']); // array([0]=>'bar', [1]=>'baz')