库存表前端开发：如何让表格行输入列共享单个提交按钮？

核心思路 #

把原来每行独立的表单合并成一个包裹整个表格的大表单，通过结构化命名输入框区分不同行的数据，最后用表格底部的单个提交按钮完成批量提交。

修改后的HTML结构 #

<form id="inventoryForm" method="POST" action="/update-inventory">
  <table>
    <thead>
      <tr>
        <th>In stock（库存）</th>
        <th>Rented（已出租）</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <!-- 示例行1：对应物品ID为1 -->
      <tr>
        <td><input type="number" name="inventory[1][in_stock]" value="10" min="0"></td>
        <td><input type="number" name="inventory[1][rented]" value="3" min="0"></td>
        <td>
          <button type="button" onclick="adjustValue(this, 'in_stock', -1)">-</button>
          <button type="button" onclick="adjustValue(this, 'in_stock', 1)">+</button>
          <button type="button" onclick="adjustValue(this, 'rented', -1)">-</button>
          <button type="button" onclick="adjustValue(this, 'rented', 1)">+</button>
        </td>
      </tr>
      <!-- 示例行2：对应物品ID为2 -->
      <tr>
        <td><input type="number" name="inventory[2][in_stock]" value="15" min="0"></td>
        <td><input type="number" name="inventory[2][rented]" value="5" min="0"></td>
        <td>
          <button type="button" onclick="adjustValue(this, 'in_stock', -1)">-</button>
          <button type="button" onclick="adjustValue(this, 'in_stock', 1)">+</button>
          <button type="button" onclick="adjustValue(this, 'rented', -1)">-</button>
          <button type="button" onclick="adjustValue(this, 'rented', 1)">+</button>
        </td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="3">
          <button type="submit">批量更新库存</button>
        </td>
      </tr>
    </tfoot>
  </table>
</form>

增减操作的JS实现 #

添加以下函数，实现点击按钮时调整对应输入框的数值：

function adjustValue(button, field, delta) {
  const row = button.closest('tr');
  const input = row.querySelector(`input[name$="[${field}]"]`);
  if (input) {
    let currentValue = parseInt(input.value) || 0;
    input.value = Math.max(currentValue + delta, 0); // 确保数值不小于0
  }
}

关键细节说明 #

• 表单合并：整个表格包裹在一个<form>标签内，提交时所有输入框的数据会一次性发送到后端。
• 输入框命名规则：采用inventory[物品ID][字段名]的格式，后端可直接解析为结构化的二维数据（比如PHP的$_POST['inventory']、Node.js通过body-parser解析后的对象），物品ID需对应数据库中记录的唯一标识，确保后端能精准定位要更新的行。
• 操作按钮类型：将原来的提交按钮改为type="button"，避免点击时触发表单提交，仅通过JS完成本地数值调整。
• 后端处理示例（PHP）：

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $inventoryData = $_POST['inventory'];
  foreach ($inventoryData as $itemId => $values) {
    $inStock = $values['in_stock'];
    $rented = $values['rented'];
    // 执行数据库更新，注意使用参数绑定防止SQL注入
    // $stmt = $pdo->prepare("UPDATE inventory SET in_stock = ?, rented = ? WHERE id = ?");
    // $stmt->execute([$inStock, $rented, $itemId]);
  }
  // 更新完成后跳转或返回成功提示
}

内容的提问来源于stack exchange，提问作者AbD