Question

我有一个onclick函数附加到每个<td>元素。该函数需要知道表中的位置（行和列）。

我为rowIndex找到了一个名为<tr>的属性，但这将涉及获取父元素，但仍无法帮助列号。

到目前为止，这是我的功能（它在一个循环中，所以它附加到每个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

Answer 2

element.cellIndex

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

Example

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/

中的示例

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

5 个答案: