Read a value from another row in the same column of a table, when I click in one row
I have several tables with the same structure; row one is a product name, row two is an image of this product, and row three is a short product description. I want to use jquery to read the value of the alt attribute of the image when I click on the product name. With the code below I calculate the clicked column into colx, but although I can see that the value is correct, I clearly get the whole second row instead of only the second row of the clicked column. When I replace colx with a fixed value, like 2 or 3, I can read the alt value. This drives me crazy. In the code below I added a line to also change the background-color of the third row, but that's done deliberately to see what's actually going on. This extra line actually doesn't work in IE7, which may be a bug in jquery, but that's not important in this case.
<script type="text/javascript">
$(function(){
$('table th')
.click(function(event){
var colx = $(this).parent().children().index($(this));
var table1 = $(this).parent().parent().parent();
$('tr:nth-child(3) td:nth-child(colx)',table1).css("background-color","Red");
var verdi = $('tr:nth-child(2) td:nth-child(2)',table1).css("background-color","yellow").attr('img') + ' ' +colx;
say(verdi);
})
function say(text) {
$('#console').html('<div>'+text+'</div>');
}
</script>