Get column value onclick HTML table

Question

I have this html table:

tabela

   |A|B|C|D|
   _________
001|M|N|O|P|
002|R|S|T|U|

And with this script I can get the row 1st value, e. onclick N get the value 001

var table = document.getElementById("tabela");
var rows = table.rows;
for (var i = 1; i < rows.length; i++) {
    rows[i].onclick = (function() {
        var rowid = (this.cells[0].innerHTML); 
        window.location.href = "next.php?rowidphp="+ rowid;
               });
            }

The thing is that I need to get the column 1st value, e. onclick N shuld get the value B

I'm trying everything but I can reach the point.....

Answer 1

Here's the fiddle: http://jsfiddle.net/t7G6K/

var table = document.getElementById("tabela");
var rows = table.rows;
for (var i = 1; i < rows.length; i++) {
    rows[i].onclick = (function (e) {
        var rowid = (this.cells[0].innerHTML);
        var j = 0;
        var td = e.target;
        while( (td = td.previousElementSibling) != null ) 
            j++;
        alert(rows[0].cells[j].innerHTML);
    });
}

Answer 2

Try this:

table = document.getElementById("tablea");
var rows = table.rows;
for (var i = 1; i < rows.length; i++) {
    rows[i].cells[2].onclick = function (e) {
        rowid = e.target.previousElementSibling.previousElementSibling.textContent;
        alert(rowid);
    };
}

Here is the Demo

Answer 3

jsFiddle http://jsfiddle.net/2dAkj/9/#

Ok with jQuery i would do it like this.

$(function () {
    $('table').on('click', function (e) {
        var x = $(e.target);
        var index = x.parents('tr').find('td,th').index(x);
        alert($(x.parents('table').find('tr').first().find('td,th')[index]).text());
    });
});