Insertion ligne tableau + contenu

**mr_keyser** · 14/05/2009, 15h53

Bonjour,

J'aimerai ajouter des lignes à un tableau. Mais plus compliqué que ça, un exemple du problème sera plus parlant :

Un formulaire pour ajouter un livre, avec les champs "title", "author" et "subject". Problème, on peut avoir plusieurs "author". Je voulais donc mettre un bouton "+" qui m'ajoute une ligne "d'author".
Le formulaire :

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
 
<table>
  <tr>
    <td>title : </td>
    <td><input type="text" name="title_book" /></td>
    <td></td>
  </tr>
  <tr>
    <td>author : </td>
    <td><input type="text" name="author_book_1" /></td>
    <td><input type="button" id="add_author" name="add_author" value="+" /></td>
  </tr>
  <tr>
    <td>subject : </td>
    <td><input type="text" name="subject_book" /></td>
    <td></td>
  </tr>
</table>

J'ai réussi à cloner la ligne "tr" contenant le bouton, et de l'insérer juste en dessous du bouton:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
$("#add_author").click(function() {
  $(this).parent().parent().clone().insertAfter($(this).parent().parent()); // on clone la ligne.
  $(this).css("display", "none"); // pour ne garder qu'un bouton '+' affiché.
});

Problème 1 - Du coup, mes "input author", ils ont tous le même id et name.
Je cherche donc un moyen d'incrémenter l'id et le name.

Problème 2 - Pareil pour les boutons, même id, donc il ne marche plus.
J'aimerai déplacer le bouton dans la ligne d'en-dessous.

Je voulais essayer des trucs dans le genre : Récupérer le "input" dans la case à coté du bouton, incrémenter son nom, et l'ajouter dans une nouvelle ligne en-dessous:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
$("#add_author").click(function() {
  var inputauthor = $(this).parent().parent().$("input");
  inputauthor.attr("name", "name+1"); // name+1 à remplacer par une méthode qui récupère le nom et remplace le dernier caractère.
  $(this).parent().parent().after("<tr><td></td><td>"+inputauthor+"</td><td></td></tr>");
});

ça marche évidemment pas....

Je suis perdu help me!!

Merci

**mr_keyser** · 14/05/2009, 17h06

J'ai fait un truc comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
$("#button-add-lastname").click(function() {
  var tr_lastname = $(this).parent().parent();
  var input_lastname = $("input:text", tr_lastname);
  var name = input_lastname.attr("name");
  var idx = parseInt(name.substring(name.lastIndexOf("_") + 1)) + 1;
  var new_name = name.substring(0, name.lastIndexOf("_") + 1) + idx;
  $(this).parent().parent().after("<tr><td></td><td>" + input_lastname.attr("name", new_name).attr("id", new_name) + "</td><td></td></tr>");
});

Il me crée la nouvelle ligne, mais me met [object Object] dans la case.

**mr_keyser** · 14/05/2009, 17h31

Ouhou je parle tout seul

Mais c'est pas grave, j'ai réussi à faire ce que je voulais. C'est un peu môche, mais c'est pas grave:

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
 
$("#button-add-lastname, #button-add-author").click(function() {
  // On clone
  $(this).parent().parent().clone(true).insertAfter($(this).parent().parent());
 
  // On crée le nouveau name et id
  var name_this = $("input:text", $(this).parent().parent()).attr("name");
  var idx_this = parseInt(name_this.substring(name_this.lastIndexOf("_") + 1)) + 1;
  var new_name = name_this.substring(0, name_this.lastIndexOf("_") + 1) + idx_this;
 
  // On récupère le nouveau input
  var new_tr = $(this).parent().parent().next();
  var new_input = $("input:text", new_tr);
  new_input.attr("name", new_name).attr("id", new_name)
 
  // On cache le bouton, pour qu'il en reste qu'un visible (le nouveau)				
  $(this).css("display", "none");
});

Si quelqu'un voit mieux ou plus propre et clair, je suis preneur.

Merci

**danielhagnoul** · 14/05/2009, 22h49

Bonsoir.

Voir les commentaires dans le code :

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
    <style type="text/css">
        body {
            background-color:#696969;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        div#conteneur {
            width:95%;
            margin:12px auto;
            padding:6px;
            background-color:#FFFFFF;
            color:#000000;
            border:1px solid red;
            font-size:0.8em;
        }
    </style>
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var authors = []; //array pour récupérer la liste des auteurs
 
            $("#addAuthor").click(function(){
                if ($("#authorBook").val().length > 0) {
                    var i = authors.length;
                    authors[i] = $("#authorBook").val();
 
                    //afficher la liste des auteurs
                    $("#authorList").append(authors[i] + ",<br/>");
 
                    if ($("#authorList").css("visibility") == "hidden") $("#authorList").css({visibility:"visible"});
 
                    $("#authorBook").val("");
 
                    /*
                    //pour debug avec Firebug
                    for (var j = 0; j < authors.length; ++j) console.log("author[" + j + "] = " + authors[j]);
                    */
                }
            });
         });
    </script>
</head>
<body>
    <div id="conteneur">
        <p style="margin:12px;">
            Attention, pour le style du span, style="display:block; visibility:hidden; width:200px; overflow:hidden;", la seule chose sur laquelle on peut jouer est la valeur du width. Si un auteur à un "nom à rallonge" il s'étalera sur plusieurs lignes ou il sera tronqué, mais c'est indispensable pour évter l'agrandissement du tableau vers la droite.
        </p>
        <table style="border:1px solid red;">
            <tr>
                <td>title : </td>
                <td><input type="text" name="title_book" /></td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>author : </td>
                <td>
                    <span id="authorList" style="display:block; visibility:hidden; width:200px; overflow:hidden;"></span>
                    <input id="authorBook" type="text" name="author_book" />
                </td>
                <td>
                    <input id="addAuthor" type="button" name="add_author" value="+" />
                </td>
            </tr>
            <tr>
                <td>subject : </td>
                <td><input type="text" name="subject_book" /></td>
                <td>&nbsp;</td>
            </tr>
        </table>
    </div>
</body>
</html>

Insertion ligne tableau + contenu

jQuery

Vue hybride

Discussions similaires

Partager

Partager