【解決方法】ボタンが最初の行でのみ機能する理由 > HTML、PHP、JS

[ad_1]

PHPを使用してdbテーブルからデータを動的に取得するHTMLテーブルがあります。
アイデアはユーザーがクリックしたときです 受け入れる または 拒否する ボタンをクリックするとラベル（保留）が変わりますが、3行目のボタンをクリックしても1行目のラベルしか変わりません。

私が試したこと:

いろいろ検索したところ、行ごとに一意の ID が必要だと言われたので、各行に一意の ID (id=”cert_num”) を付けようとしましたが、それも機能しませんでした。何を見逃したのでしょうか?

これはコードです:

PHP:

PHP

if ($result-> num_rows > 0){
  while ($row=$result-> fetch_assoc()) {  
   ?> 
 
    <tr id="<?=$row["cert_num"]?>">
    <td ><?=$row["Student_id"]?></td>
      <td><?=$row["cert_name"]?></td>
      <td><?=$row["cert_pro"]?></td>
      <td><?=$row["cert_date"]?></td>      
      <td><?=$row["cert_file"]?></td>
      <td><label name="pending" id="pending">Pending</label></td>
      <td><button name="accept" id="accept" onclick="StatusAccept()">Accept </button></td>
      <td> <button name="reject" id="reject" onclick="StatusReject()">Reject</button></td>

    </tr> 

      <?php }} ?>

JS:

JavaScript

var pending = document.getElementById("pending");

    function StatusAccept() {
         
        pending.innerHTML='<label style="background: green"> 
        Accepted</label>'
    }

    function StatusReject() {
        pending.innerHTML='<label style="background: red"> 
        Rejected</label>'
}

解決策 1

HTML ドキュメント内の ID は一意である必要があります。重複した ID を持つ HTML ドキュメントを生成しています。たとえば、すべての行に次のようなボタンがあります。 id="pending"。 ID が「pending」の要素をドキュメントに要求すると、要素は 1 つだけ返されます。この場合、最初に見つかったものが返されますが、常に特定のものが選択されるという保証はありません。

各要素に一意の ID を使用するようにコードを変更する必要があります。あるいは、操作したい要素を特定する別の方法を見つけてください。たとえば、次のように使用します。イベントの委任[^] :

HTML

<td><label name="pending">Pending</label></td>
<td><button name="accept">Accept </button></td>
<td> <button name="reject">Reject</button></td>

JavaScript

document.getElementById("YourTableId").addEventListener("click", function(e) {
    let target = e.target;
    if (target.tagName !== "BUTTON") { target = target.closest("button"); }
    if (!target) { return; }
    
    let statusText, statusColor;
    if (target.name === "accept") {
        statusText = "Accepted";
        statusColor = "green";
    } else if (target.name === "reject") {
        statusText = "Rejected";
        statusColor = "red";
    } else {
        console.warn("Unknown button:", target);
        return;
    }
    
    const pending = target.closest("tr").querySelector("label[name='pending']");
    pending.innerHTML = statusText;
    pending.style.backgroundColor = statusColor;
});