Extract cell index of clicked HTML table using jQuery - Please help!

Question

Hello!

I am looking for a way to do the following with a normal HTML table using jQuery.

1. Extracting the index of the clicked cell and the index of the row it belongs too.
2. Highlight the selected cell and remove the highlight when it is clicked again.
3. Keep track of which cells that are selected so that I can save them into a database.

This is what I have done so far:

$("#frame td").click(function(e) {

    var RowSelected = $(this).parent().parent().children().index($(this).parent());
    var CellSelected = e.target.cellIndex;

    $(this).toggleClass("selected", this.clicked);

    $("#cells").append("R" + RowSelected + "C" + CellSelected + ", ");

});

Please help!

Answer 1

You could do this by attempting to count the rows, etc., but one approach that I like when I'm writing my tabled programmatically is to add classes to each cell as I write them out so that each cell has a class that tells me where it is, and so that I can address it very quickly:

<table>
   <tr class="row1">
      <td class="row1 col1">Something</td>
      <td class="row1 col2">Something else</td>
      ...
      <td class="row1 col10">Final thing</td>
   </tr>

   <tr class="row2">
      <td class="row2 col1">Something</td>
      <td class="row2 col2">Something else</td>
      ...
      <td class="row2 col10">Final thing</td>
   </tr>

   <tr class="row3">
      <td class="row3 col1">Something</td>
      <td class="row3 col2">Something else</td>
      ...
      <td class="row3 col10">Final thing</td>
   </tr>
</table>

Now, in your jQuery:

$('td').click(function() {
   var classes = $(this).attr('class').split(/\s+/),
       col,
       row,
       i;

   for (i in classes) {
      if (classes[i].substring(0,2) == 'col') { col = classes[i].substring(3); }
      if (classes[i].substring(0,2) == 'row') { row = classes[i].substring(3); }
   }

   alert('You clicked the cell on row ' + row + ' and column ' + col);
});

This looks a little unwieldy, but what I like about it is I can address each cell in the table very quickly with something like:

$('td.row2.col3').text(); // will quickly grab the contents of cell r2,c3

I hope this is helpful.

Answer 2

DOM gives you rowIndex as well as cellIndex, there is no need for the crazy jQuery index work.

Also if you postpone the generation of the list-of-selected-cells until submit-time you won't have to try to keep track of them by adding and removing elements on click:

$('#frame td').click(function() {
    $(this).toggleClass('selected');
});

$('#someform').submit(function() {
    $('#cells').val(
        $('#frame td.selected').map(function() {
            return 'R'+this.parentNode.rowIndex+'C'+this.cellIndex;
        }).get().join(', ')
    );
});

assuming #cells is a hidden input you're using to pass the information.