PHP-generierten Tabellen Taste funktioniert Onclick nur für die erste

Question

ich eine HTML-Tabelle von PHP (aus den Ergebnissen der SQL-Abfrage) erzeugt haben:

echo "<table border=\"5\"><tr><th>Codice</th><th>Titolo</th><th>Anno Creazione</th><th>Materiale</th><th>Altezza</th><th>Peso</th><th>Museo</th></tr>"; 
while($row = mysqli_fetch_assoc($results)) { 
     echo "<tr><td>".$row["Codice"]."</td><td>".$row["Titolo"]."</td><td>".$row["Anno_creazione"]."</td><td>".$row["Materiale"]."</td><td>".$row["Altezza"]."</td><td>".$row["Peso"]."</td><td>".$row["Museo"]."</td><td><button id=\"modifica\" type=\"button\">Modifica</button></td><td><button id=\"cancella\" type=\"button\">Cancella</button></td></tr>"; 
} 
echo "</table>"; 

Dann habe ich diese JQuery:

$("#cancella").click(function(){ 
    if(confirm("Vuoi davvero eliminare questi dati?")){ 
     var codice = <?php echo json_encode($cod); ?>; 
     var tipo = <?php echo json_encode($tipo_opera); ?>; 
     window.location.href = "delete.php?codice="+codice+"&tipo="+tipo; 
    } 
}); 

Diese Klick-Funktion funktioniert nur für die Schaltfläche "Löschen" in der ersten Zeile. Warum?

Answer 1

id ist eindeutig und kann daher nur einem element zugewiesen werden.

Verwenden Sie eine class.

<button class=\"cancella\" type=\"button\">Cancella</button> 

$(".cancella").click(function(){ 
// Do Something. 
}); 

Alternative:

<button type=\"button\" onclick=\"cancella()\">Cancella</button> 

function cancella(){} 

Answer 2

<button id=\"cancella\" type=\"button\">Cancella</button> 

Bedürfnisse einer Klasse sein, nicht eine ID

Answer 3

Die ID eindeutig sein sollte, wenn das in Ihrer DOM-Struktur Wiederholung wird dann stehen Sie vor der Problem. Verwenden Sie class cancella etwas und definieren Sie dann ein Datenattribut, um ein bestimmtes Element zu identifizieren, wenn Sie möchten.

So wird Ihr Code sein ...

in Html

echo "<tr><td>".$row["Codice"]."</td><td>".$row["Titolo"]."</td><td>".$row["Anno_creazione"]."</td><td>".$row["Materiale"]."</td><td>".$row["Altezza"]."</td><td>".$row["Peso"]."</td><td>".$row["Museo"]."</td><td><button id=\"modifica\" type=\"button\">Modifica</button></td><td><button data-myid=".$row['id']." class='cancella' type=\"button\">Cancella</button></td></tr>"; 

In JS

$(".cancella").click(function(){ 
    if(confirm("Vuoi davvero eliminare questi dati?")){ 
    var particular_element = $(this).attr('data-myid'); 
    } 
}); 

Auch wenn Sie dynamisch "mehr" Elemente hinzugefügt werden, dann sollten Sie $(document).on('click', '.cancella', function(){}); stattdessen verwenden von $(".cancella").click(), hoffe es hilft.