如何檢測單擊哪一行[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;
   };

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注入click事件：

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;
}