jQuery sum events on TD click

Question

I have a simple table to simulate a Gantt chart. The idea is that each TD clicking trigger a sum of values stored in an hidden input text (an array of values), available in a TH (first son of TR tag). The row sum of these values, is shown on a final TD.

Next, the code table:

  <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>

The array of values works as follows: array [0]: Off; array [1]: preoperative; array [2]: Operating.

This is the jQuery code I use to differentiate cells that are pre-operational and operational. If a cell is inactive, the area is off:

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

Inactive TD always sum to the total. What I want to do? Simple: 1. That jQuery always sum TH input value[0], if the TD is not clicked (inactive). 2. When I click, or double click, a TD.gantt jQuery fetch the TH input value[1], and add it to the total.

If anyone can help with the whole problem, o a parcial, I would really appreciate.

Answer 1

Mixing "click" and "dblclick" is not going to work, at least not reliably. I suggest you re-work the interaction so that "click" cycles through your three different states.

To do the math you want to do (and I don't fully understand that), the basic problem is to get the <th> contents that correspond to the column that each clicked <td> is in. To get that, you'll have to find which child the <td> is of its parent <tr>, and then that will allow you to find the <th> (with the ":nth-child" selector, or the "eq" filter).