遍历表并返回单击元素的位置

Question

我在每个<td>元素上都附加了一个onclick函数。函数需要知道表中的位置(行和列(。

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

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

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

我可以用jQuery解决这个问题，但我正在尝试不用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演示。

然后将其细化为：

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演示。

Answer 2

element.cellIndex

将为您提供列零索引位置。

示例

Answer 3

在您的情况下，是否可以在服务器端脚本中将行和列回显到td元素的id中？例如。。。id="'.$row.'_'.$col.'">

然后，它只是解析this.id.

Answer 4

开始：-http://jsfiddle.net/FloydPink/Lu8Yw/

var tds = document.getElementsByTagName('td');
for (var i = 0; i < tds.length; i++) {
    var td = tds[i];
    td.onclick = function(event) {
        event = (event) ? event : window.event;
        console.log('rowIndex: ' + this.parentNode.rowIndex + ', colIndex: ' + this.cellIndex);
    }
}

Answer 5

首先，为每个td创建点击事件并不高效。建议使用事件委派。您可以在谷歌上搜索使用事件委派的好处。

http://www.nczonline.net/blog/2009/06/30/event-delegation-in-javascript/

基本上，表中的单元格越多，消耗的内存就越多。不要创建多个单元格，而是创建一个要委派的事件。

var table = document.getElementById('test-table');
table.onclick = function(e) {
    var target = e.target,
        parent;
    if (target.tagName === 'TD') {
        parent = target.parentNode;
        console.log('rowIndex', parent.getAttribute('rowindex'), 'colIndex', target.getAttribute('colindex'));
    }
}

以下是jsfiddle中的示例http://jsfiddle.net/EWGzB/1/