PHP-生成的 table 按钮 onclick 仅适用于第一个

Question

我有一个 HTML table 从 PHP 生成（来自 SQL 查询的结果）：

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

然后，我有这个 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;
    }
 });

此点击功能仅对第一行的"delete"按钮有效。为什么？

Answer 1

id 是唯一的，因此只能分配给一个 element。

使用 class.

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

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

选择：

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

function cancella(){}

Answer 2

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

需要是 class 而不是 id

Answer 3

ID 应该是唯一的，如果它在您的 DOM 结构中重复，那么您将面临问题。使用 class cancela something 然后定义一些数据属性来标识特定元素。

因此您的代码将是...

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

在 JS 中

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

此外，如果您要动态添加 "more" 元素，那么您应该使用 $(document).on('click', '.cancella', function(){}); 而不是 $(".cancella").click()，希望对您有所帮助。

PHP-生成的 table 按钮 onclick 仅适用于第一个

PHP-generated table button onclick works only for the first

html

javascript

php

mysql

jquery