javascript - 如何在具有多行且动态构建的数据表中提交表单？

Question

好吧，我真的不太擅长在这里提交问题，所以如果我没有把所有的标记都弄好，请放过我。我正在构建一个包含数据行的表单，其中有几个字段是输入，并且这些行都包含匹配数据。也就是说，每一行都包含相同的字段。这是我的表单的 html...

echo "<div id='display-wrapper' style='position:absolute;
    left:-100000px;'><form method='post'><table id='uploan' class='table-striped table-bordered'><thead><tr>";
        $TtlReactHeaderNames = array_keys($TtlReactQuery[1]);
        foreach($TtlReactHeaderNames as $TtlReactkey=>$TtlReactvalue) {
            echo "<th>" . $TtlReactvalue . "</th>";
        }    
        echo "<th class='green'>Revised BB Value</th><th class='green'>Revised Max Loan Capacity</th></tr></thead><tbody>";
        foreach($TtlReactQuery as $TtlReactkey=>$TtlReactvalue) {
            echo "<tr>";
            echo "<td>" . $TtlReactvalue['Store Name'] . "</td>";
            echo "<td>" . $TtlReactvalue['VIN Number'] . "</td>";
            echo "<td><input type='text' name='display-name' value='" . $TtlReactvalue['Full Name'] . "' readonly /></td>";
            echo "<td>" . $TtlReactvalue['SSN(Last Four)'] . "</td>";
            echo "<td>" . $TtlReactvalue['Ecash Vehicle Value'] . "</td>";
            echo "<td>" . $TtlReactvalue['Max Capacity'] . "</td>";
            echo "<td><input type='text' name='revised-bb-value' /></td>";
            echo "<td><input type='text' name='revised-max-loan-capacity' /></td>";
            echo "</tr>";
        }
        echo "</tbody></table><input type='submit' /></form></div>";

...并且这个表单中大约有 200 行数据。最终用户只会选择一行，在空白字段中填写信息，然后提交。但就目前而言，它只会提交最后一行的内容，因为所有输入的行都具有相同的名称。我想添加一个计数器并将名称属性附加到数字，以便每个字段都有一个唯一的名称，但是当我提交它时，我最终在 POST 数组中得到了一堆空字段，尽管数据也在那里，并且我不知道他们要填写哪一行，所以我不知道从 POST 数据中获取什么。有人建议使用 javascript 隐藏表单来填充表单，但我不确定如何去做。任何帮助将不胜感激!!!

Answer 1

共有三个选项:

选项#1:

由于默认情况下您的所有输入都是空的，因此更改输入名称以包含一组括号:<input type='text' name='revised-bb-value[]' /> .这将为您提供一组值。假设您有相同数量的输入，$_POST['revised-bb-value'][5]将与 $_POST['display-name'][5] 位于同一行.您需要做的就是遍历您的输入:

for($i = 0; $i < count($_POST['display-name']; $i++) {
   if($_POST['revised-bb-value'][$i] == '' && $_POST['revised-max-loan-capacity'][$i]  == '')
      continue;
   }

   /* process row */
}

缺点是提交空记录(尽管数据量仍然不算过多)。

选项#2:

每行创建一个表单。

这样做的缺点是，当您需要在每一行旁边都有一个“提交”按钮时，它会变得丑陋且容易出错。您可以编写附加提交按钮的 javascript onFocus()行，但您仍然有很多不必要的形式，这不是完全“正确的”html 语法。

选项 #3

使用 JavaScript，当单击一行时，您可以动态插入该行的字段。为每个 tr 和 td 提供唯一 ID，其中包括数据的唯一 ID(例如，数据库行的唯一 ID)。一个例子是 <tr id='row[1365]'和 <td id='row-bb-value[1365]'喜欢。

当用户点击该行时，将列的内容替换为html输入和与该值匹配的预定义值。通常，数据标签将用于存储原始数据，以防用户改变主意:

<td id='row-bb-value[1365]' data-original='30k'>30k</td>

该行的 onClick 函数会将其更改为:

<td id='row-bb-value[1365]' data-original='30k'><input type='text' name='revised-bb-value' value='30k' /></td>

您将为行中的每个可编辑项目执行此操作。

优点是您可以在一个表单中进行多次编辑(选项 #1 的好处，选项 #2 的限制)，没有额外的按钮或 html(选项 #2 的限制)，并且没有所有空行(选项 #1 的缺点)。