突出显示从上次点击到当前点击的列tds

Question

目前我正在使用jquery表格，我希望能够突出显示我点击两次的tds。例如，当我点击任何td时，它突出显示表中的td。当我在列中进一步向下点击另一个td时，它也会突出显示所有中间位置。如果我点击另一列中的另一个td，它应该删除前一列并重新开始。目前，我已经在jquery中使用.find进行了探索，但无济于事。我能想到的唯一选择是将id硬编码到td中并单独着色。我认为这不是有效的编码。非常感谢任何帮助。感谢

<table>
<tr>
<td><td><td>
<td><td><td>
<td><td><td>
<td><td><td>
</tr>
</table>

Answer 1

不，不需要硬编码。只需检查（在您的td-click处理程序中）已突出显示此元素的某些兄弟。例如，如果您指定一个类'.highlight'，则查询将如下所示：

$(this).siblings('.highlight');

...它将返回仅的突出显示的元素。

更新：误读了您的问题，并认为您需要实际突出显示水平列。如果它是垂直的，您需要使用，在查询中添加一些index和nth-child：

$('td').click(function() {
  var $this = $(this),
      index = $this.index();
  var $columnCells = $this.parents('table')
                          .find('tr td:nth-child(' + (index + 1) + ')');
  $columnCells.toggleClass('highlight');
});

Demo

更新＃2：这是完整的col-highlighting代码的例子（不可否认，有点粗糙）：

$('td').click(function() {
  var $this = $(this),
      index = $this.index(),
      $table = $this.parents('table'),
      $rows  = $table.find('tr'),
      $columnCells = $rows.find('td:nth-child(' + (index + 1) + ')');
  var $hiCells = $columnCells.filter('.highlight');
  if ($hiCells.length) {
       var thisRowIndex = $this.parent().index(),
           $firstHiRow = $( $hiCells[0] ).parent(),
           firstHiIndex = $firstHiRow.index(),
           $lastHiRow  = $( $hiCells[$hiCells.length - 1] ).parent(),
           lastHiIndex = $lastHiRow.index();
      if (thisRowIndex > lastHiIndex) {
          $rows.slice(lastHiIndex, thisRowIndex + 1)
               .find('td:nth-child(' + (index + 1) + ')').addClass('highlight');
      } else if (thisRowIndex < firstHiIndex) {
          $rows.slice(thisRowIndex, firstHiIndex)
               .find('td:nth-child(' + (index + 1) + ')')
               .addClass('highlight');
      }
  } else {
      $table.find('td').removeClass('highlight');
      $this.addClass('highlight');
  }
});

Demo

如您所见，每次单击一个单元格时，我们都会获取该列中的所有单元格，然后检查其突出显示状态。如果其中一些突出显示，我们会​​得到第一个和最后一个突出显示的行，然后基本上对它们执行相同的操作：1）获取所点击的行和最后一个突出显示的行之间的所有行; 2）获取同一列中的所有单元格，并且3）标记它们！如果此列中没有突出显示单元格，我们只需删除突出显示集，然后突出显示单击的单元格。

但是，如果所有列号都被缓存（例如，使用'data-column'属性），则可以简化这一点。但我认为，这种方法仍然是一样的。