jQuery somme d'événements sur TD cliquez sur

Question

J'ai une table simple pour simuler un diagramme de Gantt. L'idée est que chaque clic TD déclenche une somme de valeurs stockées dans un texte d'entrée caché (un tableau de valeurs), disponible dans un TH (premier fils de la balise TR). La somme des lignes de ces valeurs est indiquée sur un TD final.

Ensuite, la table de code:

<table width="100%" cellspacing="0" class="datagrid_ppal"> 
    <tbody> 
     <tr class="encabezado"> 
     <th rowspan="2" scope="col" width="15%">Area</th> 
     <th colspan="7" scope="col">Month</th> 
     </tr> 
     <tr class="encabezado"> 
     <th scope="col" width="2%">1</th> 
     <th scope="col" width="2%">2</th> 
     <th scope="col" width="2%">3</th> 
     <th scope="col" width="2%">4</th> 
     <th scope="col" width="2%">5</th> 
     <th scope="col" width="2%">...</th> 
     <th scope="col" width="2%">31</th> 
     </tr> 
     <tr> 
     <th scope="row">Area 1<input name="line_config" type="hidden" value="0,5,50" /></th> 
     <td class="gantt"> </td> 
     <td class="gantt"> </td> 
     <td class="gantt"> </td> 
     <td class="gantt"> </td> 
     <td class="gantt"> </td> 
     <td class="gantt">...</td> 
     <td class="gantt"> </td> 
     </tr> 
     <tr> 
     <th scope="row">Area 2 <input name="line_config" type="hidden" value="0,0,10" /></th> 
     <td class="gantt"> </td> 
     <td class="gantt"> </td> 
     <td class="gantt"> </td> 
     <td class="gantt"> </td> 
     <td class="gantt"> </td> 
     <td class="gantt">...</td> 
     <td class="gantt"> </td> 
     </tr> 
     <tr class="encabezado"> 
     <th scope="row">Total</th> 
     <td class="total_dia"> </td> 
     <td class="total_dia"> </td> 
     <td class="total_dia"> </td> 
     <td class="total_dia"> </td> 
     <td class="total_dia"> </td> 
     <td class="total_dia">...</td> 
     <td class="total_dia"> </td> 
     </tr> 
    </tbody> 
    </table> 

Le tableau de valeurs fonctionne comme suit: tableau [0]: Off; tableau [1]: préopératoire; array [2]: fonctionnement.

Il s'agit du code jQuery que j'utilise pour différencier les cellules pré-opérationnelles et opérationnelles. Si une cellule est inactive, la zone est désactivée:

$(document).ready(function() { 
    $('td.gantt').click(function() { 
     $(this).toggleClass('preop'); 
    }); 
    $('td.gantt').dblclick(function() { 
     $(this).toggleClass('operating'); 
    }); 
}); 

Inactive TD somme toujours au total. Ce que je veux faire? Simple: 1. Que jQuery additionne toujours la valeur d'entrée TH [0] si le TD n'est pas cliqué (inactif). 2. Lorsque je clique, ou que je double-clique, un jQuery TD.gantt récupère la valeur d'entrée TH [1] et l'ajoute au total.

Si quelqu'un peut aider avec tout le problème, o un parcial, j'apprécierais vraiment.

Answer 1

Mélanger "click" et "dblclick" ne fonctionnera pas, du moins pas de façon fiable. Je vous suggère de retravailler l'interaction afin que le "clic" passe par vos trois états différents.

Pour faire le calcul que vous voulez faire (et je ne suis pas tout à fait comprendre que), le problème de base est d'obtenir le <th> contenu correspondant à la colonne que chaque cliqués <td> est. Pour obtenir cela, vous » ll faut trouver quel enfant le <td> est de son parent <tr>, et alors cela vous permettra de trouver le <th> (avec le sélecteur ": nth-child", ou le filtre "eq").