Question

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 + ", ");

});

Answer 1

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.