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);
});