獲取錶行列和標題JQuery

Question

我有一個contenteditable表，我想檢索編輯的單元格的行，列和標題。我設法讓行，但我無法弄清楚如何獲得標題和列...

到目前爲止的代碼：

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

Answer 1

完整的解決方案：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 
} 

參考

jquery find

jquery closest