带有复选框和可编辑输入框的 HTML 表单答案

【问题标题】：HTML form with checkboxes and editable input boxes带有复选框和可编辑输入框的 HTML 表单
【发布时间】：2012-02-19 04:34:56
【问题描述】：

让我试着描述一下我想要完成的事情：

我想使用表格显示一个表格，其中每一行都有一个复选框、该行中项目的唯一标识符和建议数量。数量是可编辑的，用户可以选择行的子集。

表单将提交以下内容：对于每个选定的行，唯一标识符和数量将提交给服务器。

我可以使用 javascript 以某种方式“激活”提交哪些行，但我无法找到一个配对 UID + Qty 对的解决方案。

欢迎提出任何建议！

谢谢。

【问题讨论】：

标签： javascript html forms form-submit

【解决方案1】：

你可以制作这样的表格：

<?php
$width = 10; 
$height = 5;
echo '<form ...>';
echo '<table>';
for($i=0;$i<$height;$i++){
    echo "<tr>";
    for($j=0;$j<$width;$j++){
    echo <td>';
    echo '<input type="checkbox" name="'.$i.'x'.$j.'" />';
    echo '<input type="text" name="'.$i.'x'.$j.'value" value="la valeur" />';
    echo '</td>';
    }
    echo '</tr>';
    }
echo '</table>';
echo '<submit...>';
echo '</form>';

然后在处理部分，你可以做两个循环，验证复选框是否被选中，如果是则更新值

【讨论】：

【解决方案2】：

如果您的服务器端语言支持，我建议使用数组语法。例如

<tr>
 <td>
  <input type="checkbox" />
 </td>
 <td>
  <span>NAME</span>
 </td>
 <td>
  <input type="text" name="qty[5]" value="10" />
 </td>
</tr>

然后，服务器端语言只需要运行 POSTed qty 数组，其中索引是 UID，值是数量。这个模型可以这样展开：

<tr>
 <td>
  <input type="checkbox" />
 </td>
 <td>
  <input type="text" name="name[5]" value="Name" />
 </td>
 <td>
  <input type="text" name="qty[5]" value="10" />
 </td>
</tr>

【讨论】：