remove class from first TDs in a table

jellydeal used Ask the Experts™

I have a simple table and need to be able to clear any class assigned to the first TD in all Rows using JQuery.

Im basically manually highlighting a cell when its been clicked, I need to unhighlight all other cells.

something like :

$("#my_table td").live("click", function(){
                  $(.. new code to remove all other classes fom all <tds> with my_table)
      $(this).addClass('ui-btn-active') // this adds the class to highlight button


<table width="100%" border="0" id="my_table">
            <td ID="BUTT_3" width="13%">BUTTON 1</td>
            <td width="87%">BLA</td>
            <td ID="BUTT_3">BUTTON 2</td>
            <td>BLAA BLAAA</td>
            <td ID="BUTT_3">BUTTON 3</td>
            <td>BLAA BLAA BLAA</td>

Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
$("#my_table td").live("click", function(){
    $("#my_table td").each(function(){$(this).removeClass('ui-btn-active')});
    $(this).addClass('ui-btn-active') // this adds the class to highlight button

but this is a major improvement in efficiency (not easy to be efficient in jquery):

$("#my_table").live("click", function(evt){
    var cell = $("#my_table td");
        $("#my_table td").not(cell).each(function(){$(this).removeClass('ui-btn-active')});
        cell.addClass('ui-btn-active') // this adds the class to highlight button                                            

This will also work if you dynamically add and remove cells after page load - your original code will not.


Thankyou very much!
That's great!!!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial