Get Table Row Column and Header JQuery

Question

I have an contenteditable Table and I want to be retrieve the row, column and header for the edited cell. I've managed to get the row but I can't figure out how to get header and column...

Code so far:

document.addEventListener('keydown', function (event) {
var esc = el = event.target;
    var row = $(el).rowIndex();
}

Answer 1

Complete solution: http://jsfiddle.net/pLpKm/

HTML:

<div class"info">
    <strong>Column number: </strong><span class="column"></span>
    <br/>
    <strong>Row number: </strong><span class="row"></span>
    <br/>
    <strong>Header text: </strong><span class="header"></span>
    <br/>
</div>
<table cellpadding="0" cellspacing="0" border="1" style="width:200px; height:400px;">
    <tr>
        <th>
            Heading 1
        </th>
        <th>
            Heading 2
        </th>
        <th>
            Heading 3
        </th>
    </tr>
    <tr>
        <td contentEditable>
        </td>
        <td contentEditable>
        </td>
        <td contentEditable>
        </td>
    </tr>
    <tr>
        <td contentEditable>
        </td>
        <td contentEditable>
        </td>
        <td contentEditable>
        </td>
    </tr>
    <tr>
        <td contentEditable>
        </td>
        <td contentEditable>
        </td>
        <td contentEditable>
        </td>
    </tr>
    <tr>
        <td contentEditable>
        </td>
        <td contentEditable>
        </td>
        <td contentEditable>
        </td>
    </tr>
</table>

JS:

$('table').on('keydown', function(e){
    var columnNumber, rowNumber, headerText;
    columnNumber = $(e.target).index() + 1;
    rowNumber = $(e.target).parent().index() + 1;
    headerText = $('th:nth-child(' + columnNumber + ')').text();
    $('.column').html(columnNumber);
    $('.row').html(rowNumber);
    $('.header').html(headerText);
});

Answer 2

<table>
<tr>
 <td>name1</td><td>name2</td><td>name3</td>
</tr>
<tr>
 <td>name2.1</td><td>name2.2</td><td>name2.3</td>
</tr>
<script>


var tds=document.getElementsByTagName('table')[0].getElementsByTagName('td');

for(var i=0;i<tds.length;i++){
tds[i].onclick=function(){
//console.log(this.parentNode.tagName)//TR
//console.log(this.parentNode);

var tr=document.getElementsByTagName('table')[0].getElementsByTagName('tr');
for(var j=0;j<tr.length;j++){
    if(tr[j]==this.parentNode){
        console.log('row:'+j);//index row
    var arrtd=tr[j].getElementsByTagName('td')
    for(var m=0;m<arrtd.length;m++){
        if(this==arrtd[m])
        console.log('col:'+m);//index col
        //break;
    }
}
}
}
}

Answer 3

document.addEventListener('keydown', function (event) {
var esc = el = event.target;

esc.closest("tr");//get tr
esc.closest("td"); //get td
esc.closest("table").find("thead");//for thead header
}

reference

jquery find

jquery closest