Question

我正在尝试通过Javascript将onclick事件添加到表格行。

function addRowHandlers() {
    var table = document.getElementById("tableId");
    var rows = table.getElementsByTagName("tr");
    for (i = 1; i < rows.length; i++) {
        row = table.rows[i];
        row.onclick = function(){
                          var cell = this.getElementsByTagName("td")[0];
                          var id = cell.innerHTML;
                          alert("id:" + id);
                      };
    }
}

这在Firefox中可以正常工作，但在Internet Explorer（IE8）中，我无法访问表格单元格。我认为这在某种程度上与onclick函数中的“this”被识别为“Window”而不是“Table”（或类似的东西）这一事实有关。

如果我可以访问当前行，我可以在onclick函数中执行getElementById，我无法找到方法。有什么建议吗？

谢谢！

Answer 1

像这样。

function addRowHandlers() {
  var table = document.getElementById("tableId");
  var rows = table.getElementsByTagName("tr");
  for (i = 0; i < rows.length; i++) {
    var currentRow = table.rows[i];
    var createClickHandler = function(row) {
      return function() {
        var cell = row.getElementsByTagName("td")[0];
        var id = cell.innerHTML;
        alert("id:" + id);
      };
    };
    currentRow.onclick = createClickHandler(currentRow);
  }
}

修改

工作demo。

Answer 2

我认为对于IE，您需要使用Event object的srcElement属性。如果jQuery是您的选择，您可能需要考虑使用它 - 因为它为您抽象了大多数浏览器差异。示例jQuery：

$("#tableId tr").click(function() {
   alert($(this).children("td").html());
});

Answer 3

以上是@redsquare和@SolutionYogi所讨论的纯粹的 Javascript （不是jQuery ）解决方案的紧凑和清洁版本（re：添加适用于所有主要Web浏览器的onclick所有HTML表行的事件处理程序，包括最新的IE11：

function addRowHandlers() {
    var rows = document.getElementById("tableId").rows;
    for (i = 0; i < rows.length; i++) {
        rows[i].onclick = function(){ return function(){
               var id = this.cells[0].innerHTML;
               alert("id:" + id);
        };}(rows[i]);
    }
}
window.onload = addRowHandlers();

工作DEMO

注意：为了使其在IE8中工作，而不是this指针使用@redsquare建议的显式标识符，如function(myrow)。最好的问候，

Answer 4

头部卡在jq中太久了。这将有效。

function addRowHandlers() {
    var table = document.getElementById("tableId");
    var rows = table.getElementsByTagName("tr");
    for (i = 1; i < rows.length; i++) {
        var row = table.rows[i];
        row.onclick = function(myrow){
                          return function() { 
                             var cell = myrow.getElementsByTagName("td")[0];
                             var id = cell.innerHTML;
                             alert("id:" + id);
                      };
                  }(row);
    }
}

Answer 5

尝试将this.getElementsByTagName("td")[0])行更改为row.getElementsByTagName("td")[0];。这应该捕获闭包中的row引用，它应该按预期工作。

编辑：以上是错误的，因为row是一个全局变量 - 正如其他人所说的那样，分配一个新变量然后在闭包中使用THAT。

Answer 6

我的桌子位于另一个iframe中，所以我修改了 SolutionYogi 答案以便使用：

<script type="text/javascript">
window.onload = addRowHandlers;
function addRowHandlers() {
    var iframe = document.getElementById('myiframe');
    var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;

    var table = innerDoc.getElementById("mytable");
    var rows = table.getElementsByTagName("tr");
    for (i = 0; i < rows.length; i++) {
        var currentRow = table.rows[i];
        var createClickHandler = 
            function(row) 
            {
                return function() { 
                                        var cell = row.getElementsByTagName("td")[0];
                                        var id = cell.innerHTML;
                                        alert("id:" + id);
                                 };
            }

        currentRow.onclick = createClickHandler(currentRow);
    }
}
</script>

Answer 7

我试图选择一个表格行，以便可以轻松地将其复制到剪贴板然后粘贴到Excel中。以下是您的解决方案的一个小改编。

参考文献：

Where I took the window.prompt line from (Jarek Milewski)：

向用户显示提示框，其中已选择要复制的文本...
For selecting a complete table (Tim Down)。非常有趣，但我无法适应<tr>元素。

<!DOCTYPE html>
<html>
<body>

<div>
    <table id="tableId" border=1>
      <tbody>
        <tr><td>Item <b>A1</b></td><td>Item <b>B1</b></td></tr>
        <tr><td>Item <b>A2</b></td><td>Item <b>B2</b></td></tr>
        <tr><td>Item <b>A3</b></td><td>Item <b>B3</b></td></tr>
      </tbody>
    </table>
</div>

<script>
function addRowHandlers() {
    var table = document.getElementById("tableId");
    var rows = table.getElementsByTagName("tr");
    for (i = 0; i < rows.length; i++) {
        var currentRow = table.rows[i];
        var createClickHandler = 
            function(row) 
            {
                return function() { 
                                        var cell = row.getElementsByTagName("td")[0];
                                        var id = cell.innerHTML;

                                        var cell1 = row.getElementsByTagName("td")[1];
                                        var id2 = cell1.innerHTML;
                                        // alert(id + " - " + id2);
                                        window.prompt("Copy to clipboard: Ctrl+C, Enter", "<table><tr><td>" + id + "</td><td>" + id2 + "</td></tr></table>")
                                 };
            };

        currentRow.onclick = createClickHandler(currentRow);
    }
}
window.onload = addRowHandlers();
</script>
</body>
</html>

Answer 8

我是这样做的。我创建了一个带有thead和tbody标签的表。然后通过id向tbody元素添加click事件。

<script>
    document.getElementById("mytbody").click = clickfunc;
    function clickfunc(e) {
        // to find what td element has the data you are looking for
        var tdele = e.target.parentNode.children[x].innerHTML;
        // to find the row
        var trele = e.target.parentNode;
    }
</script>
<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody id="mytbody">
        <tr><td>Data Row</td><td>1</td></tr>
        <tr><td>Data Row</td><td>2</td></tr>
        <tr><td>Data Row</td><td>3</td></tr>
    </tbody>
</table>

Answer 9

简单的方法是按以下方式生成代码：

<!DOCTYPE html>
<html>
<head>

<style>
  table, td {
      border:1px solid black;
  }
</style>

</head>
<body>
<p>Click on each tr element to alert its index position in the table:</p>
<table>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex</td>
  </tr>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex</td>
  </tr>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex</td>
  </tr>
</table>

<script>
  function myFunction(x) {
      alert("Row index is: " + x.rowIndex);
  }
</script>

</body>
</html>

Answer 10

虽然大多数答案是SolutionYogi答案的副本，但它们都错过了一项重要检查，以查看'cell'是否不为null，如果单击标题，将返回错误。因此，这是包含支票的答案：

function addRowHandlers() {
  var table = document.getElementById("tableId");
  var rows = table.getElementsByTagName("tr");
  for (i = 0; i < rows.length; i++) {
    var currentRow = table.rows[i];
    var createClickHandler = function(row) {
      return function() {
        var cell = row.getElementsByTagName("td")[0];
        // check if not null
        if(!cell) return; // no errors! 
        var id = cell.innerHTML;
        alert("id:" + id);
      };
    };
    currentRow.onclick = createClickHandler(currentRow);
  }
}

Answer 11

selectRowToInput();
function selectRowToInput(){
var table = document.getElementById("table");
var rows = table.getElementsByTagName("tr");
for (var i = 0; i < rows.length; i++)
{
    var currentRow = table.rows[i];
    currentRow.onclick = function() {

       rows=this.rowIndex;
        console.log(rows);  
    };
}

}

Answer 12

我试图弄清楚如何使用纯JS获得更好的结果，并且得到以下结果：

演示：https://jsfiddle.net/f5r3emjt/1/

const tbody = document.getElementById("tbody");
let rowSelected;

tbody.onclick = (e) => {
  for (let i = 0; i < e.path.length; ++i) {
    if (e.path[i].tagName == "TR") {
      selectRow(e.path[i]);
      break;
    }
  }
};

function selectRow(r) {
  if (rowSelected !== undefined) rowSelected.style.backgroundColor = "white";

  rowSelected = r;
  rowSelected.style.backgroundColor = "dodgerblue";
}

现在您可以在所需的其他函数中使用变量 rowSelected 或在设置样式后调用另一个函数

将onclick事件添加到表行

12 个答案: