Question

I need to be able to apply a style to all cells in the table, except cells in the current column.

I am trying to do something like this but it does not seem to work. What am I missing?

    var col = $(this).parent().children().index($(this));
    $("#myTable td:nth-child(:not(col-1))").addClass("myClass");

    <table id="myTable">
    <tr>
        <td>col 1</td>
        <td>col 2</td>
    </tr>
    <tr>
        <td><span class="click">click</span></td>
        <td><span class="click">click</span></td>
    </tr>
    </table>

Answer 1

//bind click event handler to the `.click` elements
$('#myTable').find('.click').on('click', function () {

    //remove class from all TDs
    $('#myTable').find('td').removeClass('myClass');

    //get the index of the clicked element based on its parents siblings
    var index = $(this).closest('td').index();

    //iterate though each TD element in the table and add the class to it if it isn't the same index as the clicked element
    $.each($('#myTable').find('tr').children(), function () {
        if ($(this).index() != index) {
            $(this).addClass('myClass');
        }
    });
});

Here is a demo: http://jsfiddle.net/hU5qW/1/

This removes the custom class from all the TD elements, then add it to the ones not in the column with the SPAN clicked. Note that if you call .index() on an element, you will get the index of that element based on its sibling elements.