TD 클릭시 jQuery sum 이벤트

Question

간트 차트를 시뮬레이트 할 수있는 간단한 테이블이 있습니다. 아이디어는 숨겨진 입력 텍스트 (값 배열)에 저장된 값의 합계를 트리거하는 각 TD가 TH (TR 태그의 첫 번째 아들)에서 사용 가능하다는 것입니다. 이 값의 행 합계가 최종 TD에 표시됩니다.

다음에, 코드 테이블 :

<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는 항상 합계의 합계입니다. 내가 뭘하고 싶어? Simple : 1. TD가 클릭되지 않으면 (비활성) jQuery는 항상 입력 값 [0]을 합계합니다. 2. 클릭하거나 두 번 클릭하면 TD.gantt jQuery가 TH 입력 값 [1]을 가져와 합계에 추가합니다.

누군가가 전체적인 문제를 해결할 수 있다면, 필자는 정말로 감사 할 것입니다.

Answer 1

"클릭"과 "dblclick"믹싱은 적어도 안정적으로 작동하지 않습니다. 상호 작용을 다시하여 "클릭"이 세 가지 다른 상태를 순환하도록 제안합니다.

원하는 수학을 수행하기 위해 기본 문제는 각각 <td>을 클릭 한 열과 일치하는 <th> 콘텐츠를 얻는 것입니다. <td>이 어떤 자식인지 알아 내야 <tr>이되며 <th> (": nth-child"선택기 또는 "eq"필터 사용)를 찾을 수 있습니다.