無法使用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>