javascript - 表单在 php while 循环中呈现相同的数据

Question

我正在尝试获取一个编辑表单来处理 php.ini 中的循环。我有一个删除按钮，它工作得很好。编辑表单只显示表格中的第一行。在 Firebug 中，它显示所有其他表单都存在，每个表单都有正确的唯一 ID，但只有第一个表单显示在不同行上单击编辑时。有人可以帮我解释为什么吗？

<table id="table_id" class="table table-hover table-striped">
    <thead>
        <tr>
            <th>ID #</th>
            <th>Product</th>
            <th>Quantity</th>
            <th>Price</th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
    <?php
        while($row = mysqli_fetch_assoc($search_sql)) {
    ?>
        <tr>
            <td id = "clicked"><?=$row['ID']?></td>
            <td id = "clicked"><?=$row['Product']?></td>
            <td id = "clicked"><?=$row['Quantity']?></td>
            <td id = "clicked">$ <?=$row['Price']?></td>
            <td>
              <button class="btn btn-warning btn-sm" onclick="div_show2(this, '<?=$row['ID']?>'); return false;"><span class="glyphicon glyphicon-edit"></span>Edit</button>
              <!-- Modal for the Edit Data Form -->
              <div id ="hidden-form2">
              <div id = "popupContact">
              <form action= "updateData.php" id = "editForm<?=$row['ID']?>" method="POST" name="editForm">
                <input type="hidden" name="ID" value="<?=$row['ID']?>">
                <div class="form-group">
                  <label for="product">Product</label>
                  <input type="text" class="form-control" id="product<?=$row['ID']?>" name="product" value="<?=$row['Product']?>">
                </div>
                <div class="form-group">  
                  <label for="quantity">Quantity</label>
                  <input type="text" class="form-control" id="quantity<?=$row['ID']?>" name="quantity" value="<?=$row['Quantity']?>">
                </div>
                <div class="form-group">
                  <label for="price">Price</label>
                  <input type="text" class="form-control" id="price<?=$row['ID']?>" name="price" value="<?=$row['Price']?>">
                </div>
                <button type="button" class="btn btn-default" onclick="formHide2()">Close</button>
                <button type="submit" id="save" class="btn btn-primary">Save changes</button>
              </form>
              </div>
              </div>
              <!--End of Edit Form-->
            </td>
            <td> 
              <!--Delete Button Form-->
              <form method="post" action="deleteData.php">
              <button class="btn btn-danger btn-sm" type="submit"><span class="glyphicon glyphicon-trash"></span>Delete</button> 
              <input type="hidden" id="ID" name="ID" value="<?=$row['ID']?>">
              </form>      
            </td>
        </tr>
        <?php 
    }
        ?>
    </tbody>
  </table>

//调用编辑表单作为模态弹出窗口的脚本//显示编辑表单弹出的功能

function div_show2() {
document.getElementById("editForm").reset(); 
document.getElementById('hidden-form2').style.display = "block";
}

//Function to Hide Popup
function formHide2(){ 
document.getElementById('hidden-form2').style.display = "none";
}

Answer 1

您的 show_div2 函数只显示一个元素。

document.getElementById('hidden-form2').style.display = "block";

这说明了为什么您只看到第一行。

如下更新您的 HTML 和 Javascript

HTML

<div id="hidden-form2<?=$row['ID']?>">

Javascript

function div_show2(id) {
    document.getElementById("editForm"+id).reset(); 
    document.getElementById('hidden-form2'+id).style.display = "block";
}

为避免将来出现此类问题，请始终确保您的 ID 是唯一的。