javascript - 表の行の列とヘッダーの JQuery を取得

Question

contenteditable テーブルがあり、編集されたセルの行、列、およびヘッダーを取得したいと考えています。行は取得できましたが、ヘッダーと列を取得する方法がわかりません...

これまでのコード:

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

Answer 1

<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 2

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 検索

最も近いjquery