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 )

[PIEPLU]

EN faisant comme tu as mis, on a la possibilité de supprimer aussi ?

[Golgotha]

Pourquoi on ne pourrait pas ?

Il faut faire le code quoi ^^

[PIEPLU]

Disons que j'y suis depuis ce matin 8 heures, et ca commence à me

[Golgotha]

Bon, je vais t'aider alors

Code js :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
function addRow(num_tab, num_jour) {
    var nb_tranche = $(".tranche_hor").size();
    if (nb_tranche < 3){
        var new_line = $("#tranche_0").clone().attr('id',   'tranche_' + nb_tranche);
        $(new_line).insertAfter( "#tabs" + num_tab + "" + num_jour + "" );
    }
}
 
 
function delRow(num_tab, num_jour) {
    var nb_tranche = $(".tranche_hor").size() - 1;
    if (nb_tranche > 0)
        $("#tranche_" + nb_tranche).remove();
}

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

[PIEPLU]

Bizarre, quand on fait ajouter une tranche horaire, ca se met pas en dernier, et pareil quand on veut supprimer, ca ne commence pas par la fin.

[Golgotha]

Oui, c'est le insertAfter, remplace le par insertBefore

[PIEPLU]

Rapide et efficace.

Mais, un problème se pose. J'ajoute les autres jours de la semaine, et bien du coup, je peux plus ajouter de plage horaire car on dirait qu'il détecte plus de 3 au final (7, pour les 7 jours de la semaine)

[PIEPLU]

Maintenant que j'ai mis tous les jours de la semaine ca bug : http://www.justacote.com/horaires.php

[Golgotha]

J'ai corrigé quelques erreurs, ça devrait être mieux.

Code js :

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
 
function addRow(num_tab, num_jour, num_ligne) {
    var nb_tranche = $(".tranche_hor_" + num_jour).size() -1;
    if (nb_tranche < 2){
			var num_ligne_suivante = nb_tranche + 1;
        var new_line = $("#tranche_" + num_jour + "_" + num_ligne).clone().attr('id',   'tranche_' + num_jour + "_" + num_ligne_suivante);
        $(new_line).insertBefore( "#tabs" + num_tab + "" + num_jour + "" );
    }
}
 
 
function delRow(num_tab, num_jour, num_ligne) {
    var nb_tranche = $(".tranche_hor_" + num_jour).size() - 1;
    if (nb_tranche > 0)
        $("#tranche_" + num_jour + "_" + nb_tranche).remove();
}

Si tu n'as pas besoin de num_tab et num_ligne dans tes fonctions tu pourra les enlever aussi, ça sera plus propre.

[PIEPLU]

La suppression de ligne ne marche pas bien
Sacré bordel ce trucs

[Golgotha]

La suppression de ligne ne marche pas bien

Comment ça, j'ai regardé sur ta page, ça à l'air de bien marcher.

[PIEPLU]

ah oui, faut que j'arrête de fumer lol
Dernière ligne droite pour clore ce développement laborieux pour moi, il faut que je puisse dupliquer le jour d'avant.

[PIEPLU]

Je n'arrive pas a dupliquer pour le moment, et je viens de me rendre compte d'un autre problème.
Quand tu fais un ajout de ligne, et bien l'input type text garde le même nom