javascript - jQuery sum TD 点击事件

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 总和等于总和。我想做的事？简单的: 1. 如果 TD 没有被点击(非事件)，jQuery 总是对 TH 输入值求和[0]。 2. 当我单击或双击时，TD.gantt jQuery 会获取 TH 输入值[1]，并将其添加到总计中。

如果有人可以帮助解决整个问题，我将非常感激。

Answer 1

混合使用“click”和“dblclick”是行不通的，至少是不可靠。我建议您重新设计交互，以便“点击”在三种不同状态之间循环。

要做你想做的数学(我不完全理解)，基本问题是得到 <th>与每个单击的列对应的内容 <td>要得到这个，你必须找到 <td> 是哪个子项。是其父项 <tr> ，然后您就可以找到 <th> (使用“:nth-child”选择器或“eq”过滤器)。