为了账号安全,请及时绑定邮箱和手机立即绑定

将onclick事件添加到表行

将onclick事件添加到表行

杨魅力 2019-11-18 14:25:56
我试图通过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”(或类似的东西)有关。如果我可以访问当前行,则可以getElementById在onclick函数中执行,因为我找不到这样做的方法。有什么建议么?
查看完整描述

3 回答

?
白衣非少年

TA贡献1155条经验 获得超0个赞

这样的事情。


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

  }

}


查看完整回答
反对 回复 2019-11-18
?
慕桂英546537

TA贡献1848条经验 获得超10个赞

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


$("#tableId tr").click(function() {

   alert($(this).children("td").html());

});


查看完整回答
反对 回复 2019-11-18
?
慕田峪9158850

TA贡献1794条经验 获得超7个赞

这是@redsquare和@SolutionYogi上面讨论的同一纯Javascript(不是jQuery)解决方案的紧凑且更简洁的版本,该解决方案onclick在所有主要的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();

注意:为了使其也能在IE8中工作,请this使用function(myrow)@redsquare所建议的显式标识符代替指针。最好的祝福,


查看完整回答
反对 回复 2019-11-18
  • 3 回答
  • 0 关注
  • 556 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信