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

您可以使用event delegation。基本上你在表中添加一个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;
   };

Answer 2

this关键字可用于获取单元格的parentNode，即<tr>元素。 <tr>元素具有行号.rowIndex。

的属性

事件：

onclick='fncEditCell(this)'

功能：

window.fncEditCell = function(argThis) {
    alert('Row number of Row Clicked: ' + argThis.parentNode.rowIndex);
};

完整的工作示例：

jsFiddle

动态设置OnClick事件

使用.setAttribute注入点击事件：

cell2.setAttribute("onmouseup", 'editLst(this)');

动态创建表的示例：

for(var prprtyName in rtrnTheData) {
  var subArray = JSON.parse(rtrnTheData[prprtyName]);

  window.row = tblList.insertRow(-1);

  window.cell1 = row.insertCell(0);
  window.cell2 = row.insertCell(1);
  window.cell3 = row.insertCell(2);
  window.cell4 = row.insertCell(3);
  window.cell5 = row.insertCell(4);
  window.cell6 = row.insertCell(5);
  window.cell7 = row.insertCell(6);
  window.cell8 = row.insertCell(7);
  window.cell9 = row.insertCell(8);

  cell1.setAttribute("onmouseup", 'dletListing(this.title)');
  cell1.setAttribute("title", "'" + subArray.aa + "'");

  cell2.setAttribute("onmouseup", 'editLst(this)');
  cell2.setAttribute("title", "'" + subArray.aa + "'");

  cell1.innerHTML = "Dlet";
  cell2.innerHTML = "Edit";
  cell3.innerHTML = subArray.ab;
  cell4.innerHTML = "$" + subArray.ac;
  cell5.innerHTML = subArray.ad;
  cell6.innerHTML = subArray.ae;
  cell7.innerHTML = subArray.af;
  cell8.innerHTML = subArray.ag;
  cell9.innerHTML = subArray.meet;
};

Answer 3

这使用sectionRowIndex来获取包含tBody的索引。

function getRowIndex(e){
 e= window.event || e;
 var  sib, who= e.target || e.srcElement;
 while(who && who.nodeName!= 'TR') who= who.parentNode;
 if(who){
  alert(who.sectionRowIndex+1)
  if(e.stopPropagation) e.stopPropagation();
  else e.cancelBubble= true;
  // do something with who...
 }
}

onload= function(){
 document.getElementById('my_table').onclick= getRowIndex;
}

Answer 4

我尝试了 Alan Wells 的书面回答，但它正在返回，未定义。所以，我稍微修改了一下，得到如下的行索引：

argThis.rowIndex

这将返回单击行的行索引。

修改 <tr> 标签：

<tr onclick="fncEditCell(this)" >

然后，在 HTML 底部添加一个 script 标记：

<script>
  window.fncEditCell = function(argThis) {
    alert('Row number of Row Clicked: ' + argThis.rowIndex);
};
</script>

举个例子，你可以看到这张图片：

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

4 个答案:

事件：

功能：

完整的工作示例：

动态设置OnClick事件

动态创建表的示例：