从所选（单击的）单元格中读取表标题值

Question

我想知道如何通过找出单击了哪个单元格来获取表格中的某个标题值。

我知道我可以这样获取单元格值：

var table = document.getElementById('mytbl'),
cells = table.getElementsByTagName('td');

for (var i=0,len=cells.length; i<len; i++){
    cells[i].onclick = function(){
        console.log(this.innerHTML);

但是我怎样才能让它读取标题值呢？

例如，如果单击 b2，我想要获取 x2 值，如果单击 a3，我想要 x3 值，等等...

x1 x2 x3
a1 a2 a3
b1 b2 b3

Answer 1

您可以利用

cellIndex

var table = document.getElementById('mytbl'),
cells = table.getElementsByTagName('td');
for (var i = 0, len = cells.length; i < len; i++) {
  cells[i].onclick = function () {
    var th= table.getElementsByTagName('th')[this.cellIndex];
    console.log(th.innerHTML);
  }
}

演示

Answer 2

您可以对这样的表使用一个处理程序。 演示。

var table = document.getElementById('mytable');

table.addEventListener('click', function(e) {
    var position = e.target.cellIndex, //clicked td index if any

        header = position !== undefined && table.rows[0].cells[position].innerHTML; 
       //first row at pos.    

    if(!header) return;

    console.log(header);        
});