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?
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.
You're not being specific enough in your search for ".hidden_____" information. So it's just selecting the first one it finds. I corrected the issue by narrowing the search to only decedents of the ancestor <td> of the clicked element:
$('.showtext').html($(this).closest("td").find('.hiddentext').html());
$('.showplayerone').html($(this).closest("td").find('.hiddenplayerone').html());
$('.showplayertwo').html($(this).closest("td").find('.hiddenplayertwo').html());
$('.showplayerthree').html($(this).closest("td").find('.hiddenplayerthree').html());
I forked your code with the fix here:
At a glance, it would appear your problem is that you use "$prevCall" and "$nextCall" to determine what players to display when previous or next is clicked. Nothing like this is done when a column is clicked - if you do something like this:
var $thisCol = $(this);
rows.children().removeClass('highlighted');
$('.showtext').html($thisCol.find('.hiddentext').html());
$('.showplayerone').html($thisCol.find('.hiddenplayerone').html());
$('.showplayertwo').html($thisCol.find('.hiddenplayertwo').html());
$('.showplayerthree').html($thisCol.find('.hiddenplayerthree').html());
it should be fine. However, you might look into creating a single "select_colum" function which previous, next and clicking all rely on, it would make the code more compact and reduce duplicate code, which makes for easier debugging and troubleshooting.
To elaborate a bit on this: let's say you wanted to add a name to the table. In order to properly update them all, you'd need to add the line
$('.showplayerfour').html($thisCol.find('.hiddenplayerfour').html());
in three different places. What you can instead do is create a function like this:
function update_names($col) {
$('.showtext').html($col.find('.hiddentext').html());
$('.showplayerone').html($col.find('.hiddenplayerone').html());
$('.showplayertwo').html($col.find('.hiddenplayertwo').html());
$('.showplayerthree').html($col.find('.hiddenplayerthree').html());
}
You can then add player four just to this function, and each display option would work with it. There's a lot more you can do with this technique (if you're motivated, you can probably get it to the point where you wouldn't even need to specify each individual player).
Here is my full working solution
I want to say 'enjoy' ... Notice : only one handler is attached to the DOM (the table element)
$(function(){
var $t = $('table');
$t.on('click', function(e){
var $table = $(this),
$target = $(e.target),
$tdParent = $target.closest('td'),
$alltr = $table.find('> tr, > tbody > tr');
// Prev, next and td actions
if( $target.is('.race > a') || ! $tdParent.is('.highlighted, .emptyrace, .race, .not') ){
// if a 'prev' or 'next' has been clicked
if( $target.is('a') ){
$tdParent = $('.highlighted', $alltr.filter(':gt(0)'))[($target.hasClass('next')? 'next':'prev')]('td:not(.not)');
if( ! $tdParent.length){
return false;
} else if ($tdParent.hasClass('invisible')) {
var $one = $tdParent.eq(0), $other = $one.parent().children(':not(.not)'), index = $other.index($one);
$tdParent.parent().each( function(i,el){
$(this)
.children(':not(.not)')
.filter(':eq('+(index + (6*($target.hasClass('next')? -1:1)))+')')
.removeClass('visible').addClass('invisible')
});
$tdParent.removeClass('invisible').addClass('visible');
}
}
// Common actions ...
var tdIndex = ':nth-child(' + ($tdParent.eq(0).parent().children().index($tdParent.eq(0)) + 1) + ')';
$alltr.eq(0).find('.showtext').html($alltr.eq(1).find(tdIndex + ' > .hiddentext').html());
$alltr.filter(':gt(0)')
.find(' > td.highlighted').removeClass('highlighted').end()
.find(tdIndex).addClass('highlighted').end()
.not(':eq(0)').each(function(){
var $this = $(this),
css = $this.find('> td.not > span').attr('class').replace(/^.*(player[^ ]+).*$/, '$1');
$this.find('.show'+css).html($alltr.eq(1).find(tdIndex + ' .hidden'+css).html());
});
return false;
}
});
});
You need to select the td with which you want to replace the text.. If that is found then the function seems to be working fine..
rows.children().not('.emptyrace, .race, .not').on('click', function(e) {
rows.children().removeClass('highlighted');
var id=e.target.id ;
$('.showtext').html($('#'+id).find('.hiddentext').html());
$('.showplayerone').html($('#'+id).find('.hiddenplayerone').html());
$('.showplayertwo').html($('#'+id).find('.hiddenplayertwo').html());
$('.showplayerthree').html($('#'+id).find('.hiddenplayerthree').html());
var index = $(this).prevAll().length;
rows.find(':nth-child(' + (index + 1) + ')').addClass('highlighted');
});
