从JavaScript动态地为tr元素添加onclick事件

Add onclick event for tr element dynamically from JavaScript

本文关键字：元素 添加 onclick 事件 tr JavaScript 动态      更新时间：2023-09-26

我正在动态创建一个表，我需要为每个元素添加一个onclick事件，因为它被添加，但这需要一个动态参数添加，我已经尝试了以下

trElements[i + 1].onclick = function () { 
    navigateToController('/Home/Client', "'" + machine.DeviceID + "'"); 
};

，但这显示onclick事件为navigateToController('/Home/Client'， "'" + machine。DeviceID + "'")

and not navigateToController('/Home/Client'， 'DeviceName');正如我所想的那样，我还尝试在html中使用onclick事件，并将DEVICEID替换为实际的DEVICEID。

var element = trElements[i + 1].outerHTML.replace('DEVICEID', machine.DeviceID);
trElements[i + 1].outerHTML = element;

这显示为正确的，但是当页面加载时，它仍然有deviceid在那里?

我相信这是非常简单的事情…但如果有任何提示，我将不胜感激。

我不完全确定我理解了这个问题，但它可能是一个范围问题。您可能需要使用bind来创建当前值为DeviceID的处理程序:

var machineId = 0;
function navigateToController(machineId) {
  alert(machineId);
}
function addRow() {
  var t = document.getElementById('thetable');
  var tr = t.insertRow();
  var td = tr.insertCell();
  td.appendChild(document.createTextNode("machine " + machineId));
  tr.addEventListener('click', navigateToController.bind(null, machineId));
  machineId++;
}
<button onclick="addRow()">Add Row</button>
<table id="thetable"></table>

，但这显示onclick事件为navigateToController('/Home/Client'， "'" + machine。DeviceID + "'")

你不会在标记中看到变量的值，如果你是这个意思的话。

为什么不只是navigateToController('/Home/Client', machine.DeviceID ) ?它已经是一个字符串了。不需要尝试在它周围添加引号。你最终会得到一个包含引号的参数。

var deviceId = 'theDeviceId';
// This is not what you want. Notice this alert includes the single quotes as part of the string: "'theDeviceId'"
alert( "'" + deviceId + "'"); 
// This is what you want. This alert has just the (unquoted) value.
alert( deviceId );

最好的方法是根本不做。

最好将事件处理程序附加到现有容器(在这种情况下表似乎很好)并检查冒泡事件。

使用jQuery很简单:

var myTable = $("table#theTable");
myTable.on("click", "tr", function(){ // Click event handler.
    var clickedRow = $(this);
    ...
});

如果您需要与每行相关的一些数据，只需将其附加到标签的"data-"属性中(即«data- myid ="someId"»)。然后，您可以通过从事件处理程序函数中单击kedrow .data("myId")来读取它们。

这样你就有一个函数来处理所有行的所有事件。

trElements[i + 1].onclick = (function () { 
    var deviceId = machine.DeviceID;
    return function(){
       navigateToController('/Home/Client', "'" + deviceId  + "'");
    } 
})();

好的,所以我找不到的底部添加一个onClick功能动态,因此,我改变了我的代码,并通过一系列视图模型包含所有我需要创建表的数据,所以当我打开客户视图,我把所有相关的客户列表,当我选择我所需要的行,我只是通过单一的客户端视图模型,然后用c#代码更新html @model.variable。我可以很容易地更新这些从我的信号代码一旦它的创建。

感谢大家的参与。

只是更新，我已经找到了一个解决方案，我认为，我可以创建元素，将数据添加到innerHtml，并使用:

setAttribute("onclick"， "navigateToController('/Home/Client'， '" + deviceId + "')");

我已经在我的解决方案的另一部分使用了这个，它的工作…

相关文章：