Question

I’ve been working on something for the last hours but can’t seem to get it working properly.
When a user clicks on a table column (Rn) it should become highlighted and the text should change (player names and race information) in some other TD elements, the same principle as for the previous and next buttons, where everything works fine.

Anyone knows what I’m doing wrong here?

Code: http://jsfiddle.net/yunowork/4UGre/8/

Answer 1

The code

$('.showplayerone').html($('.hiddenplayerone').html());
$('.showplayertwo').html($('.hiddenplayertwo').html());
$('.showplayerthree').html($('.hiddenplayerthree').html());

is putting the value of the first element with class of hiddenplayerone two etc into the shown data, which will always be John, Fred and Jason. You need to select only the correct element by supplying the selector with the ID of the correct data, something like this:

thisRow = $(this).prop('id');
rows.children().removeClass('highlighted');
$('.showtext').html($('.hiddentext').html());
$('.showplayerone').html($('#'+thisRow+' .hiddenplayerone').html());
$('.showplayertwo').html($('#'+thisRow+' .hiddenplayertwo').html());
$('.showplayerthree').html($('#'+thisRow+' .hiddenplayerthree').html());

This works if you click on any of rows in the race column, not just the title row.

Working Example: http://jsfiddle.net/4UGre/13/

You appear to be using the same ID in several places though (R1, R2 etc), which is bad practice, consider changing this.