Question

我的HTML中有一个名为id ='myTable'的表。然后我在JavaScript中即时填写行（因为在整个程序的使用过程中它会不断变化。）

代码中的其他地方是函数：

function OnClickRowMyTable(row){
    alert("You clicked row " + row.toString());
}

然后我正在构建表格：

table = document.getElementById("myTable");
for (i = 0; i < 10; i++) {
    newRow = document.createElement('tr');
    newRow.setAttribute('style', "background-color: #FFFFBB");
    newRow.title = "";
    newRow.onclick = (function () { var iUse = i; return OnClickRowMyTable(iUse); })();
    table.appendChild(newRow);

    for (j = 0; j < 5; j++) {
        newCol = document.createElement('td');
        newCol.innerHTML = "-";
        newRow.appendChild(newCol);
    }
}

如果我离开（）;在onclick行的末尾，它实际上在构造表时多次调用OnClickRowMyTable函数。

如果我在没有（）的情况下结束该行，那么在构造期间不会调用该函数，但是当我单击该行时，它总是说我已经单击了第10行，而不管我单击了哪一行。

如何在构造期间停止调用该函数，然后说我点击了正确的行，当我点击它时，而不是说我一直点击第10行？

Answer 1

您应该将循环的内容包装在立即调用的函数表达式（IIFE）中并将i传递给它。这将在您的表行构建时保持i的值。

	var table = document.getElementById("myTable");
	for (var i = 1; i <= 10; i++) {
	  (function(i) {
	    var newRow = document.createElement('tr');
	    newRow.setAttribute('style', "background-color: #FFFFBB");
	    newRow.title = "";
	    newRow.onclick = function() {
	      return OnClickRowMyTable(i);
	    };
	    table.appendChild(newRow);

	    for (var j = 0; j < 5; j++) {
	      var newCol = document.createElement('td');
	      newCol.innerHTML = "-";
	      newRow.appendChild(newCol);
	    }
	  })(i);
	}

	function OnClickRowMyTable(row) {
	  alert("You clicked row " + row.toString());
	}

<table id="myTable"></table>

Answer 2

如果您想要动态添加元素，则应使用委托。

检查出来：http://api.jquery.com/on/

jQuery JS解决方案：

$( "#myTable" ).on( "click", "tr", function() {
   var row = $(this);
    alert("You clicked row " + row.toString());
});

VANILLA JS解决方案：

document.addEventListener('click', function(event) {
    if (event.target.id == 'my-id') {
      // put your code here
    }
});

非id版本：

document.addEventListener('click', function(event) {
   var t = event.target;
   while (t && t !== this) {
      if (t.matches('tr')) {
          // your code goes here
      }
      t = t.parentNode;
   }
});

Javascript表 - 即时设置onclick

2 个答案: