如何在包含while循环的表中创建表单答案

【问题标题】：How to have a form inside a table consisting a while loop如何在包含while循环的表中创建表单
【发布时间】：2020-01-29 04:06:14
【问题描述】：

我想在包含 while 循环的表中包含一个表单。我在下面提到的代码的提交按钮不起作用。我还尝试将表单标签放在表格标签之前，然后所有数字都会一次反映在 get url 中。

    <table class="table table-hover">
  <thead>
    <tr>
      <th scope="col"> KPI ID</th>
      <th scope="col">KPI Name</th>
      <th scope="col">Weightage</th>
      <th scope="col">Rating</th>


    </tr>
  </thead>
  <tbody>
  <?php

  $connect = new mysqli("localhost", "root", "", "ITP_HR"); 
  $id = $_GET['id']; 
  $sql = "SELECT kpi_id,kpi_name,rating,Weight,Fin_Rating FROM kpi where Emp_ID =$id"; 
  $result=mysqli_query($connect,$sql);
//   var_dump($result);
  while($row =  mysqli_fetch_array($result) ){

    $kpi_idp = $row['kpi_id'];
    $kpi_namep =$row['kpi_name'];
    $Weight = $row['Weight'];
    $Fin_Rating =$row['Fin_Rating'];
   ?>


    <tr> 
    <form action="update_ftask.php" method="GET">
    <td scope="row"><?=$kpi_idp?><input type="hidden" name="<?=$kpi_idp?>"></td>
    <td scope="row"><?=$kpi_namep?></td>
    <td scope="row"><?=$Weight?></td> 
    <td scope="row"><input type="number" name="<?=$Fin_Rating?>"></td>
    <td scope="row"><button type="submit" class="btn btn-primary">Submit</button></td>

    </form>     

    </tr>

    </tbody>
  <?php
    // $i++;
  }
  ?> 

  </tbody>
</table>

【问题讨论】：

要成为有效的 HTML，表单必须完全包含表格或完全包含在表格单元 (td) 元素中。由于您的 HTML 现在在上面，它是无效的
欢迎来到 Stackoverflow @Natasha。我希望你能快速回答你的问题。如果可能的话，通过将您的“生产”代码抽象为类似的示例来帮助人们。这样更容易阅读和理解。

标签： php html mysql sql bootstrap-4

【解决方案1】：

正确，您不能将td 或tr 包含在<form> 中。但是您可以在 td 中创建 form。

例如：

<tr> 
    <td scope="row"><?=$kpi_idp?></td>
    <td scope="row"><?=$kpi_namep?></td>
    <td scope="row"><?=$Weight?></td> 
    <td scope="row">
        <form action="update_ftask.php" method="GET">
            <input type="hidden" name="<?=$kpi_idp?>">
            <input type="number" name="<?=$Fin_Rating?>">
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>     
    </td>
</tr>

另一种解决方案是使用 javascript 魔术并监听 <form> submit 事件。在此事件中，您收集所需数据（来自相关 tr 的 inputs）并发送到服务器。

【讨论】：