Discussion :

[PIEPLU]

Bonjour,

J'ai fait un tableau comme ceci :

Code html :

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
<div class="gauche largeur640px gras" id="tabs_0"><div class="gauche largeur640px" style="padding: 10px 0;">
    <div class="gauche gras" style="width: 150px;">
        Lundi                              
    </div>
 
    <div class="gauche centrer" style="width: 340px;" id="tabs_[0][1]">
        <input type="hidden" name="tabs_[0][1][jour]" value="1">
        De <input type="time" name="tabs_[0][1][from_h]" id="tabs_[0][1][from_d]" step="1" min="00:00" max="23:59" value="00:00" class="margeHautMoins4px"> à
        <input type="time" name="tabs_[0][1][from_f]" id="tabs_[0][1][from_f]" step="1" min="00:00" max="23:59" value="00:00" class="margeHautMoins4px">
    </div>
 
    <div class="gauche" style="margin-left: 50px;">                                  
        <div onclick="addRow(0,1);" class="gauche contentBulle marge0_5"><div class="bulle"><div class="contentBulleFleche"></div><div class="contentBulleDescription" style="font-weight: normal;font-size: 13px;">Ajouter une tranche horaire.</div></div><img src="https://cdn2.iconfinder.com/data/icons/freecns-cumulus/16/519691-199_CircledPlus-16.png" width="16&quot;" height="16" alt=""></div>
        <div onclick="delRow(0,1);" class="gauche contentBulle marge0_5"><div class="bulle"><div class="contentBulleFleche"></div><div class="contentBulleDescription" style="font-weight: normal;font-size: 13px;">Supprimer une tranche horaire.</div></div><img src="https://cdn2.iconfinder.com/data/icons/freecns-cumulus/16/519643-144_Forbidden-16.png" width="16&quot;" height="16" alt=""></div>
    </div>
</div></div>

Mon but étant de créer les fonctions addRow, delRow.

Code :

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

1
2
3
function addRow(num_tab, num_jour) {
 alert("Add : " + num_tab + " - " + num_jour);
}

En cliquant sur l'icone +, addRow doit rajouter le choix des horaires.

J'ai voulu vous mettre ici : http://jsfiddle.net/6kTBv/4/ mais la fonction se lance pas alors que sur mon pc j'ai au moins l'alerte.

Merci de votre aide

[Golgotha]

Bonjour,

Il faut positionner ton js dans le head avec "No wrap - in head" et ça sera bon sur ton fiddle.

[PIEPLU]

Bien vu, pour montrer ca va etre plus simple

J'ai modifié le JS, mais je comprend pas, c'est pas sensé ajouté une ligne ?!

http://jsfiddle.net/6kTBv/5/

[Golgotha]

Si tu utilise jQuery dans ton code, ne pas oublier de le mettre sur jsfiddle (la liste en haut à gauche)

Sinon, je ne sais pas encore pourquoi, les ID avec des "[]" ne plaise pas à jQuery, sans crochet ça ce passe bien.

http://jsfiddle.net/6kTBv/7/

[Bovino]

Ce serait sympa de faire le minimum syndical de débogage avant de poster...

Code :

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

id="tabs_[0][1]"

Code :

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

insertAfter( "#tabs[0][1]" )

[PIEPLU]

En suivant tes conseils, voici l'évolution : http://jsfiddle.net/6kTBv/8/
Par contre, il faut que j'arrive à limiter à 3 lignes.

[Golgotha]

Personnellement j'aurai fait quelques chose comme ça :

Code js :

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

1
2
3
4
5
6
7
8
 
function addRow(num_tab, num_jour) {
    var nb_tranche = $(".tranche_hor").size();
    if (nb_tranche < 3){
        var new_line = $("#tranche").clone().attr('id',   this.id + '_' + nb_tranche);
        $(new_line).insertAfter( "#tabs" + num_tab + "" + num_jour + "" );
    }
}

http://jsfiddle.net/6kTBv/11/

( tu as toujours des crochets dans tes id, il faudrait éviter )