Question

Currently i am using to jquery for a table which i would like to be able to highlight the tds where i click twice. for example when i click on any td, it highlights that td in the table. When i click on another td further down in the column, it highlights all the middle too. If i click on another td in another column, it should remove the previous column and start all over again. Currently, I have explored with .find in jquery but to no avail. The only option i could think of is hard coding a id into the td and colouring individually. This i think is not efficient coding. Would appreciate any help. Thanks

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

Answer 1

No, no need to hardcode. Just make a check (in your td-click handler) that some siblings of this element are already highlighted. For example, if you assign a class ‘.highlight’, the query will look like this:

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

… which will return you elements from the same row only which are highlighted.

UPDATE: Misread your question and thought you need to highlight a horizontal column actually. If it’s vertical you need to work with, add some index and nth-child to your queries:

$('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.

UPDATE #2: Here’s (admittedly, a bit rough) example of the full col-highlighting code:

$('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.

As you see, each time a cell is clicked, we get all the cells in the column, then check their highlight state. If some of them are highlighted, we get the first and the last highlighted rows, then basically perform the same op on them: 1) get all the rows that are in between the clicked row and the last highlighted one; 2) get all the cells in the same column, and 3) mark ’em! If no cells are highlighted in this column, we just remove the highlights set, then highlight the clicked cell.

This can be streamlined quite a bit, though, if all the column numbers are cached (for example, with ‘data-column’ attribute). But the method in general, I suppose, is still the same.