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

Ok, so let's back up quite a bit. You need to provide all the relevant code so that we can reproduce your error. That means the HTML, CSS and JavaScript. You have not even provided the `test()` function. — Scott Marcus, Jul 27 '17 at 18:33
`onclick='test('` you are open and closing the single quote right away, escape the quotes — Huangism, Jul 27 '17 at 18:38

Vindhyachal Kumar · Answer 1 · 2017-07-28T12:45:41.127

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>

just change this line of code tr = tr + ''; – Vindhyachal Kumar Jul 28 '17 at 12:43 — Vindhyachal Kumar, Jul 28 '17 at 12:43

score 0 · Answer 2 · answered Jul 27 '17 at 18:36

0

Your problem is in here

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

answered Jul 27 '17 at 18:36

serdar.sanri

2,217
1
17
21

Scott Marcus · Answer 3 · 2017-07-27T18:59:10.970

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 (i.e. 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>

Unable to get the table cell value using onclick dynamically

3 Answers3