时间戳

首页 > 解决方案 > 根据查询结果循环，将 id 放在输入上并在 td 内选择标签

javascript - 根据查询结果循环，将 id 放在输入上并在 td 内选择标签

问题描述

根据查询结果为每个输入标签分配 id 并在 tr 中选择标签

我尝试了这样的代码，将 id 放入输入标签并选择标签

        <table id="myTable">
          <thead>
               <th>Progress</th>
               <th>Amount</th>
               <th>Action</th>
          </thead>
          <tbody>
            <?php $qry = "SELECT * FROM trade";
                  foreach($conn->query($qry) as $data){
            ?>
            <form action="update.php" method="post">
            <tr>
               <td><select name="progress" id="select_progress" onclick="changeSetting()">
                       <option value="Partial">Partial</option>
                       <option value="Full">Full</option>
                   </select></td>
               <td><input type="number" name="amount" id="amount"></td>
               <td><input type="submit" name="update" value="Update"></td>
               <input type="hidden" name="tradeid" value="<?php echo $data['tradeID'];?>">
            </tr>
            </form>
            <?php }?>
          </tbody>
         </table>

现在我像这样编写了javascript：

        function changeSetting(){
             var selectValue = document.getElementById("select_progress").value;
             var amountValue = document.getElementById("amount");
             if(selectValue.value === "Partial"){
                   amountValue.required = true;
             }else if(selectValue.value === "Full"){
                   amountValue.required = false;
             }
        }

第一行似乎做得很好，但第二行不应用我写的 javascript。欢迎任何有关如何解决此问题的建议。我知道，每个元素的 id 应该是唯一的，但是如果我的查询中有大约 50 个结果，我不知道如何在每个输入上放置 id 并在我的表中选择标签。非常感谢任何建议或帮助。

标签： javascriptphphtmlmysql

解决方案

你所有的元素都具有相同的id值，所以当你尝试它时，getElementById它总是返回第一个。解决此问题的一种方法是将tradeID值添加到每个元素的id值中以区分它们。例如：

<td><select name="progress" id="select_progress<?php echo $data['tradeID'];?>" onchange="changeSetting(<?php echo $data['tradeID'];?>)">
      <option value="Partial">Partial</option>
      <option value="Full">Full</option>
    </select></td>
 <td><input type="number" name="amount" id="amount<?php echo $data['tradeID'];?>"></td>
 <td><input type="submit" name="update" value="Update"></td>

然后你会修改你的JS：

function changeSetting(id){
  var selectValue = document.getElementById("select_progress" + id).value;
  var amountValue = document.getElementById("amount" + id);
  if(selectValue === "Partial"){
    amountValue.required = true;
  }else if(selectValue === "Full"){
     amountValue.required = false;
  }
}

推荐阅读