[英]jQuery sum events on TD click
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). 这个想法是,每次TD单击都会触发存储在隐藏输入文本(值数组)中的值的总和,该值在TH(TR标签的第一个子元素)中可用。 The row sum of these values, is shown on a final TD. 这些值的行总和显示在最终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 [0]:Off; array [1]: preoperative; 数组[1]:术前; array [2]: Operating. 数组[2]:运行中。
This is the jQuery code I use to differentiate cells that are pre-operational and operational. 这是我用来区分操作前和操作单元的jQuery代码。 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. 无效的TD总是总和。 What I want to do? 我想做的事? Simple: 1. That jQuery always sum TH input value[0], if the TD is not clicked (inactive). 简单:1.如果未单击TD(无效),则jQuery总是将TH输入值[0]相加。 2. When I click, or double click, a TD.gantt jQuery fetch the TH input value[1], and add it to the total. 2.当我单击或双击TD.gantt jQuery时,提取TH输入值[1],并将其添加到总数中。
If anyone can help with the whole problem, oa parcial, I would really appreciate. 如果有人能解决整个问题,尤其是我,我将不胜感激。
Mixing "click" and "dblclick" is not going to work, at least not reliably. 至少不能可靠地混合使用“ click”和“ dblclick”。 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). 要进行您想做的数学运算(我不完全理解),基本问题是获取与每个单击的<td>
所在的列相对应的<th>
内容。必须找到<td>
是其父元素<tr>
哪个子<tr>
,然后才能找到<th>
(使用“:nth-child”选择器或“ eq”过滤器)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.