IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

selection checkbox et ligne


Sujet :

JavaScript

  1. #1
    Candidat au Club
    Inscrit en
    Octobre 2011
    Messages
    2
    Détails du profil
    Informations forums :
    Inscription : Octobre 2011
    Messages : 2
    Par défaut selection checkbox et ligne
    salut a tous,

    dans un tableau je désire changé la couleur d'une ligne et en même temps sélectionné le checkbox correspondant par un seule clic
    code js
    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
    /********* colorer une ligne et sélectionner une case lors d'un clic *****/
    function tr_select(tr){
    var bgcolor = "#FFE8DD";
    var change_color = "#940555";
    var monform= document.getElementById("myform");
    var tr = document.getElementsByTagName("tr");
    var td = document.getElementsByTagName("td");
    var chk = document.getElementsByName("checkbox[]");
     
    for(var i=0;i<chk.length;i++){
    if(tr[i]){
    k=i;
    tr[i+2].style.backgroundColor=change_color;
    chk[k].checked=true;
    }else{
    tr[i+2].style.backgroundColor=bgcolor;
    chk[k].checked=false;
    }
      }
      }
    et le html :
    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
    <div id="div1">
    <form action="delete_mult.php" method="POST" id='myform'>
    <table border=1 align='center' id="montab"><tr><thead><th>id</th><th>titre</th><th>new</th><th>
    <input type="checkbox" name="checkbox" id="checkbox" onclick="chksel();" />Check/Uncheck(All)</th></thead></tr>
    <?php
    while($data =mysql_fetch_array($res)){
    /*$id=$data['id'];
    $title=$data['title'];
    $news=$data['news'];
    onmouseover='mover(this);' onmouseout='mout(this);' 
    */
    extract($data);
    echo "<tr name='tr' class='tr' style='background-color:#edeefd;' onclick='tr_select(this);'>
    <td name='td'>$id</td>
    <td name='td'>$title</td>
    <td name='td'>$news</td>"?>
    <td><input type="checkbox" name='checkbox[]' value="<?php echo $id;?>" /></td></tr>
    <?php
    }
    ?>
    <input type='submit' value='supprimer' name='delete' class='button' onclick='supr();' />
    </table></form></div>
    si quelqu'un peut bien m'aider !!

  2. #2
    Membre éprouvé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2011
    Messages
    89
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Philippines

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2011
    Messages : 89
    Par défaut
    Dans ton html, tu utilises "tr_select(this)" mais tu écrases ensuite la valeur que tu passes dans la fonction.

    Ajoutes un id aux TR, par exemple :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <tr name='tr' class='tr' style='background-color:#edeefd;' onclick='tr_select();' id='tr_" . $id . "'>

    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
     
    function tr_select(id) {
        var i, item, tds, checkbox;
        var trs = document.getElementById("montab").getElementsByTagName("tr");
        var l = trs.length;
     
        for (i = 0; i < l; i++) {
            item = trs[i];
            tds = item.getElementsByTagName("td");
            checkbox = tds[3].getElementsByTagName("input")[0];
            if (item.id !== "tr_" + id) {
                item.style.backgroundColor = "#FFE8DD";
                checkbox.checked = false;
            } else {
                item.style.backgroundColor = "#940555";
                checkbox.checked = true;
            }
        }
    }
    PS. Indente ton code, c'est illisible là.
    PS2. J'ai pas testé mais ça devrait te donner des pistes

  3. #3
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Il n'y a pas d'attribut name pour les balises <tr> et <td> !

    Et merci de respecter Les règles incontournables d'utilisation de ce forum et de poster le code HTML généré (clic droit > code source) et non le code PHP, inutile ici.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  4. #4
    Candidat au Club
    Inscrit en
    Octobre 2011
    Messages
    2
    Détails du profil
    Informations forums :
    Inscription : Octobre 2011
    Messages : 2
    Par défaut
    Bonjour,

    Merci MrPringle pour votre réponse mais ça ne marche toujours pas

    je reçoit le message d'erreur tds[3] undefined

Discussions similaires

  1. [VBA-E]Selection d'une ligne a partir d'une certaine colonne
    Par deathsurfer dans le forum Macros et VBA Excel
    Réponses: 9
    Dernier message: 29/06/2006, 16h36
  2. changer couleur fond de cellule à la selection checkbox
    Par khoudj dans le forum Général JavaScript
    Réponses: 11
    Dernier message: 28/12/2005, 19h08
  3. [Jtable]comment permettre le non selection d'une ligne ?
    Par Invité dans le forum Composants
    Réponses: 1
    Dernier message: 30/11/2005, 11h36
  4. Réponses: 3
    Dernier message: 29/08/2005, 16h44
  5. SELECT de la ligne n1 a la ligne n2 ?
    Par LeBigornot dans le forum Langage SQL
    Réponses: 7
    Dernier message: 15/06/2005, 08h38

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo