CODEWITHSUNDEEP
javascripthtml
user8353811
user8353811

Reputation:

Unable to get the table cell value using onclick dynamically

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 enter image description here

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

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 dataenter image description here

Upvotes: 0

Views: 84

Answers (3)

Vindhyachal Kumar
Vindhyachal Kumar

Reputation: 1794

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>

Upvotes: 1

Scott Marcus
Scott Marcus

Reputation: 65825

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>

Upvotes: 0

serdar.sanri
serdar.sanri

Reputation: 2228

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

Upvotes: 0

Related Questions