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。任何有关如何解决此问题的建议都将受到欢迎。我知道，每个元素的ID应该是唯一的，但是如果我的查询中有大约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;
  }
}

根据查询结果循环，将id放置在td的input和select标签上

1 个答案: