Kann nicht den Tabellenzellenwert mit Onclick dynamisch

Question

Ich bin mit einem seltsamen Problem konfrontiert. Ich erzeuge eine dynamische Tabelle und benutze onclick am Ende jeder Tabellenzeile, um den bestimmten Tabellenzellenwert zu erhalten. hier Problem ist, ich nicht in der Lage bin, die Onclick jedes Mal wenn ich es

Onclick ausführen auszuführen und nach diesen Fehler anzeigt bekommen und wenn ich Element bin Inspektion fand ich dies Problem auf Onclick

es doppelte Anführungszeichen schafft an der linken Seite in test() und ein anderes Problem ist, dass ich eine Spalte namens hour habe, wo es Intervall wie 7-8 zeigen, so dass es -1 im Ergebnis anzeigt.

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

unten sind meine dynamischen Tabellendaten

Answer 1

Ihr Problem hier

ist

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

Answer 2

Sie haben ein paar Dinge, die Aufmerksamkeit brauchen, aber Ihr größtes Problem ist die Verkettung der Strings und die Verschachtelung von Anführungszeichen in diesen Strings.

Verwenden Sie bei der Erstellung neuer HTML-Elemente moderne Standards. Erstellen Sie die Elemente als Objekte im Speicher und konfigurieren Sie dann ihre Eigenschaften, anstatt Zeichenfolgen zu verketten. Dies wird die Notwendigkeit der Verkettung beseitigen und das Leben viel einfacher machen. Wenn Sie beispielsweise entscheiden, dass Sie die Reihenfolge des Zelleninhalts ändern möchten, tauschen Sie einfach die Position von zwei Codezeilen aus - Sie müssen sich nicht darum kümmern, eine Zeichenfolge zu ändern.

Auch, verwenden Sie keine Inline-HTML-Event-Attribute (d onclick. onmouseover, etc.) here's why. Verwenden Sie stattdessen moderne Standards.

Sie können sehen, wie viel einfacher der folgende Code ist und keine Unordnung mit Zitaten oder Verkettung erfordert.

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

Answer 3

prüft diesen Arbeitscode.

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){ 
 
\t console.log(hour, date, amount); 
 
}

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