javascript - 遍历表格并返回点击元素的位置

Question

我有一个 onclick每个 <td> 附带的功能元素。该函数需要知道表中的位置(行和列)。

我找到了一个名为 rowIndex 的属性对于 <tr> s，但这将涉及获取父元素并且仍然对列号没有帮助。

这是我到目前为止的函数(它在一个循环中，所以它附加到每个 td)

td.onclick = function(event) {
  event = (event) ? event : window.event;
  console.log('rowIndex, colIndex');
}

我可以用 jQuery 解决这个问题，但我正在尝试不使用它。

Answer 1

我的第一个想法是:

var rows = document.getElementsByTagName('tr');
var cells = document.getElementsByTagName('td');
var cellsPerRow = cells.length/rows.length;
var i = 0;
for (r=0;r<rows.length;r++){
    for (c=0;c<cellsPerRow;c++){
        cells[i].setAttribute('data-col',c + 1);
        cells[i].setAttribute('data-row',r + 1);
        cells[i].onclick = function(){
            var row = this.getAttribute('data-row');
            var col = this.getAttribute('data-col');
            alert('Row: ' + row + '; col: ' + col);
        };
    i++;
    }
}

JS Fiddle demo .

然后将其细化为:

var cells = document.getElementsByTagName('td');

for (i=0;i<cells.length;i++){
    cells[i].onclick = function(){
        var row = this.parentNode.rowIndex + 1;
        var col = this.cellIndex + 1;
        alert('Row: ' + row + '; col: ' + col);
    };
}

JS Fiddle demo .