Question

Here’s the nice and interesting problem I’m trying to figure out:

I have a table, containing 3 columns, and 8 rows. Table is generated via PHP, dynamically. Each td has a button in it with id 1,2 or 3, marking columns. Each button has 3 states/styles – Normal, clicked and hover (all different styles, 9 styles total).

So far I have managed to give each separated cell normal and hover style, via css, and I’ve created a jquery script to change class of clicked cell to its clicked style. Problem is, when I set cell style within one row, I want the two remaining cells in that row to be back to normal style:

left-normal middle-clicked right-normal
left-clicked middle-normal right-normal
left-normal middle-normal right-clicked
…

But only in THAT row.

This is my code so far:

function chooseItem(){

var left = $('#table td button#1');
    var middle = $('#table td button#2');
var right = $('#table td button#3');

        left.click(function () {
            $(this).removeClass('LeftNormal');
            $(this).addClass('LeftClicked');        
        })  

        right.click(function () {
            $(this).removeClass('RightNormal');
            $(this).addClass('RightClicked');         
        })  

         midle.click(function () {
            $(this).removeClass('MidleNormal');
            $(this).addClass('MidleClicked');           
        })
};

I have red a lot of related questions here, but no one had a similar problem. Thank you in advance!

Answer 1

Do you want something like this ?

   var $table = $('table');
   $table.find('button').click(function() {
     $(this).addClass('selected').parent().siblings().find('button').removeClass('selected');
   });​

Click to see in action : http://jsfiddle.net/8qLpm/