jQuery sum events on TD click

Question

У меня есть простая таблица для моделирования диаграммы Ганта. Идея состоит в том, что каждое нажатие TD вызывает сумму значений, хранящихся в скрытом исходном тексте (массив значений), доступный в TH (первый сын тега TR). Сумма строк этих значений показана на окончательном ТД.

Далее, таблица кодов:

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

Массив значений работает следующим образом: массив [0]: Выкл; массив [1]: предоперационный; массив [2]: рабочий.

Это код jQuery, который используется для дифференциации ячеек, которые являются предварительными и действующими. Если ячейка неактивна, область не активна:

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

Неактивный TD всегда суммируется с общей суммой. Что я хочу сделать? Простой: 1. Этот jQuery всегда суммирует входное значение TH [0], если TD не нажат (неактивен). 2. Когда я нажимаю или дважды щелкаю, TD.gantt jQuery извлекает входное значение TH [1] и добавляет его к итогу.

Если кто-то может помочь со всей проблемой, осевой, я бы очень признателен.

Answer 1

Смешивание «щелчок» и «dblclick» не будет работать, по крайней мере, не надежно. Я предлагаю вам переработать взаимодействие, чтобы «щелчок» проходил через три разных состояния.

Чтобы сделать математику, которую вы хотите сделать (и я не совсем понимаю это), основная проблема заключается в том, чтобы получить содержимое <th>, соответствующее столбцу, в котором каждый нажал <td>. Чтобы получить это, должен найти, какой ребенок <td> имеет своего родителя <tr>, а затем это позволит вам найти <th> (с селектором «nth-child» или «eq»).