如何检测单击了哪一行[tr]？

Question

在javascript中，我们如何检测表格的哪一行被单击？目前我正在做的是，我正在像这样在运行时绑定该方法。

onload = function() {
    if (!document.getElementsByTagName || !document.createTextNode) return;
    var rows = document.getElementById('my_table').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
    for (i = 0; i < rows.length; i++) {
        rows[i].onclick = function() {
            alert(this.rowIndex + 1);
        }
    }
}

[复制自[ http://webdesign.maratz.com/lab/row_index/ ]]

但是我不喜欢这种方法。有没有其他选择？我的问题只是获取被单击的行的索引。

• 没有jQuery请：D。

Answer 1

您可以为此使用事件委托。基本上，您将一个clickhandler添加到表中。该处理程序读取被单击元素的标记名，并在DOM树上向上移动，直到找到包含行。如果找到一行，它将对其执行操作并返回。诸如此类（尚未测试，但可能会给您一些想法）：

    var table = document.getElementById('my_table');
    table.onclick = function(e) {
       e = e || event;
       var eventEl = e.srcElement || e.target, 
           parent = eventEl.parentNode,
           isRow = function(el) {
                     return el.tagName.match(/tr/i));
                   };

       //move up the DOM until tr is reached
       while (parent = parent.parentNode) {
           if (isRow(parent)) {
             //row found, do something with it and return, e.g.
              alert(parent.rowIndex + 1); 
              return true;
           }
       }
       return false;
   };