根据查询结果循环，将ID放在输入上，然后在TD中选择标签

Question

每个输入标签的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。任何有关如何处理的建议都将受到欢迎。我知道，每个元素应该是唯一的，但是如果我在查询中有大约50个结果，我不知道如何将ID放在每个输入上，然后在表中选择标签。非常感谢任何建议或帮助。

Answer 1

您的所有元素都具有相同的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;
  }
}