表单在循环中呈现相同的数据

Question

我试图获得一个编辑表单来处理php中的循环。 我有一个删除按钮，它工作得很好。 编辑表单仅保留表格中的第一行。 在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

第4 td我看到都使用相同id的名称clicked 。 首先尝试修复它，看看会发生什么。

<td class="clicked" id="clickedID<?=$row['ID']?>"><?=$row['ID']?></td>
<td class="clicked" id="clickedProduct<?=$row['ID']?>"><?=$row['Product']?></td>
<td class="clicked" id="clickedQuantity<?=$row['ID']?>"><?=$row['Quantity']?></td>
<td class="clicked" id="clickedPrice<?=$row['ID']?>">$ <?=$row['Price']?></td>

Answer 2

你的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是唯一的。