Unable to get the table cell value using onclick dynamically

Question

i am facing a strange issue. I am generating a dynamic table and using onclick at the end of the each table row i have to get the particular table cell value . here problem is i am unable to perform the onclick everytime i perform onclick it is displaying

and after getting that error and when i am inspecting element i found this is problem on onclick

it is creating double quotes at left side on in test() and another problem is that i have a column named hour where it show interval like 7-8 like that it is displaying -1 in result .

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>";               
};

below is my dynamic table data

Answer 1

Check this working code.

 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

You have quite a few things that need attention, but your biggest problem is the concatenation of the strings and the nesting of quotes within those strings.

When making new HTML elements, use modern standards. Instead of concatenating strings, create the element(s) as objects in memory and then configure their properties. This will eliminate the need for concatenation and make life a lot simpler. For example, if you decide you want to swap the order of the cell content, just swap the position of two lines of code - no worries about modifying a string.

Also, don't use inline HTML event attributes (ie onclick . onmouseover , etc.) here's why . Instead, use modern standards.

You can see how much simpler the following code is and does not require any messing around with quotes or concatenation.

 // 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>