无法使用onclick动态获取表单元格值

Question

我面临一个奇怪的问题。 我正在生成一个动态表，并在每个表行的末尾使用onclick来获取特定的表单元格值。 这里的问题是我每次执行onclick时都无法执行onclick

在收到该错误后，当我检查元素时，我发现这是onclick上的问题

它在test（）的左侧创建双引号，另一个问题是我有一个名为hour的列，它在其中显示7-8之类的间隔，就像它在-1中显示-1一样。

for (var i = 0; i < Location.length; i++) {
  tr = tr + "<tr>";
  tr = tr + "<td >" + Location[i].Date + "</td>";
  tr = tr + "<td >" + Location[i].Hour + "</td>";
  tr = tr + "<td >" + Location[i].Amount + "</td>";                
  tr = tr + "<td><input  type='button'  class='nav_button btnAction' onclick='test('" + Location[i].Hour + "','" + Location[i].Date + "','" + Location[i].Amount + "'></td>";
  tr = tr + "</tr>";               
};

以下是我的动态表格数据

Answer 1

检查此工作代码。

 var tr=''; var Location=[{Date:'25 jun 2017',Hour:'1-2',Amount:100},{Date:'25 jun 2017',Hour:'2-3',Amount:200},{Date:'25 jun 2017',Hour:'3-4',Amount:300}]; for (var i = 0; i < Location.length; i++) { tr = tr + "<tr>"; tr = tr + "<td >" + Location[i].Date + "</td>"; tr = tr + "<td >" + Location[i].Hour + "</td>"; tr = tr + "<td >" + Location[i].Amount + "</td>"; tr = tr + '<td><input type="button" value="test" class="nav_button btnAction" onclick="test(\\'' + Location[i].Hour + '\\',\\'' + Location[i].Date + '\\',\\'' + Location[i].Amount + '\\')"></td>'; tr = tr + "</tr>"; }; document.getElementById('container').innerHTML=tr; function test(hour, date, amount){ console.log( hour, date, amount); } 

 <table id="container"></table> 

Answer 2

你的问题在这里

tr = tr + "<td><input  type='button'  class='nav_button btnAction' onclick=\"test('" + Location[i].Hour + "','" + Location[i].Date + "','" + Location[i].Amount + "')\"></td>";

Answer 3

您有很多事情需要注意，但是最大的问题是字符串的串联以及这些字符串中引号的嵌套。

制作新的HTML元素时，请使用现代标准。 不用串联字符串，而是将元素创建为内存中的对象，然后配置其属性。 这将消除连接的需要，并使生活简单得多。 例如，如果您决定要交换单元格内容的顺序，则只需交换两行代码的位置-无需担心修改字符串。

另外，不要使用内嵌HTML事件属性（即onclick 。 onmouseover等）， 这里的原因 。 而是使用现代标准。

您可以看到以下代码更简单，并且不需要使用引号或串联进行任何混乱。

 // Just sample data var Location = [ { Hour:"9", Date: new Date().toLocaleDateString(), Amount: 100.00 }, { Hour:"12", Date: new Date().toLocaleDateString(), Amount: 200.00 }, { Hour:"3", Date: new Date().toLocaleDateString(), Amount: 300.00 } ]; // Get reference to table var t = document.getElementById("tbl"); // Use .forEach to iterate an array instead of couting loop. // It's simpler because there is no counter that you have to // manage and accessing the array element being iterated is easy Location.forEach(function(element){ // Create a new row element as an object in memory var tr = document.createElement("tr"); // Now, create the cells that go in the row and configure them var td1 = document.createElement("td"); td1.textContent = element.Date; var td2 = document.createElement("td"); td2.textContent = element.Hour; var td3 = document.createElement("td"); td3.textContent = element.Amount; var td4 = document.createElement("td"); var btn = document.createElement("input"); btn.type = "button"; btn.classList.add("nav_button", "btnAction"); btn.value = "Click Me!"; // This is the modern approach to setting up event handlers // It's done completely in the JavaScript btn.addEventListener("click", function(){ test(element.Hour, element.Date, element.Amount); }); // Add the button to the cell td4.appendChild(btn); // Add the cells to the row tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); tr.appendChild(td4); // Add the row to the table t.appendChild(tr); }); function test(date, hour, amount){ console.log(date, hour, amount); } 

 tr:nth-child(odd) { background-color:#0af; } table, td { border-collapse:collapse; border:1px solid gray; padding:3px; } 

 <table id="tbl"></table>