Question

可能重复：
How to detect which row [ tr ] is clicked?

我有一张这样的表：

<table>
   <tr>
      <td>1</td><td>1</td><td>1</td>
   </tr>
   <tr>
      <td>2</td><td>2</td><td>2</td>
   </tr>
   <tr>
      <td>3</td><td>3</td><td>3</td>
   </tr>
</table>

在JavaScript中（请不要jQuery）如果用户点击他/她点击哪一行的表格，我该怎么办？

Answer 1

event.target，getElementsByTagName，traditional event method：

var trs = document.getElementsByTagName('tr');

for (var i = 0; i < trs.length; i++) {
     trs[i].onclick = clickHandler;   
}

function clickHandler(event) {
    alert(this.innerText || this.textContent);  // edit: textContent for firefox support
}

jsFiddle

Answer 2

如果您将click事件处理程序附加到表中，则可以获取事件target，该事件将包含实际单击的元素：

document.getElementById("yourTable").onclick = function(e) {
    console.log(e.target);   
}

在您的示例中，这可能是td，因此您可以像这样访问tr：

var tr = e.target.parentNode;

您可以检查使用tagName属性单击的元素类型：

var clickedElementType = e.target.tagName; //Returns something like "TD"

或者，您可以迭代表中的所有tr元素，并将click事件处理程序绑定到每个元素。

Answer 3

window.onload = function(){
  var table = document.getElementById('myTableID');
  table.addEventListener('click',test,false);
}

function test(e){
  var element = e.srcElement || e.target;
  if(element.nodeName == 'TABLE') return;

  while(element.nodeName != 'TR') element = element.parentNode;
  alert(element.rowIndex);
}

Answer 4

function handleEvent(e) {
  // Do stuff with the row
}

var rows = document.getElementsByTagName('tr');
for (var row in rows) {
  row.addEventListener('click', handleEvent); 
  // or attachEvent, depends on browser
}

Answer 5

我更喜欢将事件附加到DOM元素与设置onclick。如果您希望它与IE一起使用，您必须进行一些检查：

var trs = document.getElementsByTagName('tr');
var len = trs.length

var clickHandler = function(i){
    alert('clicked');
};

for(var i = 0; i < len; i++){
    var theRow = trs[i];

    if(theRow.addEventListener){
        theRow.addEventListener('click',clickHandler);
    }
    else{
        theRow.attachEvent('onclick',clickHandler);
    }
}

Answer 6

为每行添加一个id，然后您可以从Javascript onclick（）处理程序查询节点ID

Answer 7

如何在<tr>上添加onClick？

找出单击HTML表格中的哪一行

7 个答案: