Javascript 向表行添加onclick事件

我试图通过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);
                      };
    }
}

函数addRowHandlers（）{
var table=document.getElementById（“tableId”）；
var rows=table.getElementsByTagName（“tr”）；
对于（i=1；i

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

如果我可以访问当前行，我就可以在onclick函数中执行一个

getElementById

，但是我找不到一种方法来实现这一点。有什么建议吗？

类似这样的建议

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

函数addRowHandlers（）{
var table=document.getElementById（“tableId”）；
var rows=table.getElementsByTagName（“tr”）；
对于（i=0；i

编辑

---

工作

头部卡在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);
    }
}

函数addRowHandlers（）{
var table=document.getElementById（“tableId”）；
var rows=table.getElementsByTagName（“tr”）；
对于（i=1；i

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

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

---

尝试将

this.getElementsByTagName（“td”）[0]）

行更改为

行.getElementsByTagName（“td”）[0]。它应该捕获闭包中的
行
引用，并且应该按预期工作

编辑：上面的说法是错误的，因为row是一个全局变量——正如其他人所说，分配一个新变量，然后在闭包中使用它
 我的表格在另一个iframe中，因此我修改了SolutionYogi Response以处理该问题：

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


window.onload=addRowHandlers；
函数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”）；
对于（i=0；i
这是一个精简版，与@redsquare和@SolutionYogi（re:adding
onclick
event handlers to all HTML table rows）所讨论的相同的纯Javascript解决方案（而不是jQuery）版本，它适用于所有主要的Web浏览器，包括最新的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();

函数addRowHandlers（）{
var rows=document.getElementById（“tableId”）.rows；
对于（i=0；i

工作

注意：为了使其在IE8中也能工作，请使用@redsquare建议的显式标识符，如
function（myrow）
，而不是
this
指针。
致以最诚挚的问候，
我正在尝试选择一个表行，以便可以轻松地将其复制到剪贴板，然后粘贴到Excel中。下面是对您的解决方案的一个小修改

参考资料：


:

用户将看到提示框，其中已选择要复制的文本


。非常有趣，但我无法适应
元素



项目A1B1
项目A2B2
项目A3B3
函数addRowHandlers（）{
var table=document.getElementById（“tableId”）；
var rows=table.getElementsByTagName（“tr”）；
对于（i=0；i<!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> 

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

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

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

}

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