使用JQuery克隆HTML TR后，如何实现每个克隆项单独提交SQL INSERT？

嘿，我来帮你搞定这个问题！你已经成功克隆了表格行，现在要让每一行都能单独提交INSERT操作，咱们可以按下面的步骤来实现：

1. 重构表格行结构：用class代替重复的id #

首先要注意，id是页面唯一的，你克隆行的时候如果带着#stock、#hand这类id，会导致页面出现重复id，不仅不符合规范，还会让JS选择器出问题。所以先把原行里的id改成class：

<table id="oldDevTable">
  <tbody>
    <tr>
      <td><input type="text" class="stock" placeholder="库存"></td>
      <td><input type="text" class="hand" placeholder="手持"></td>
      <td><button class="submit-row">提交此行</button></td>
    </tr>
  </tbody>
</table>
<button id="add1">添加新行</button>

2. 调整克隆与提交逻辑 #

保留你原有的克隆逻辑，但把选择器改成class，同时给每行的提交按钮绑定独立的提交事件：

$(document).ready(function() {
  // 添加新行的逻辑
  $("#add1").click(function() {
    $('#oldDevTable tbody>tr:last').clone(true).insertAfter('#oldDevTable tbody>tr:last');
    // 清空新行的输入框
    $('#oldDevTable tbody>tr:last .stock').val('');
    $('#oldDevTable tbody>tr:last .hand').val('');
  });

  // 行提交的核心逻辑
  $(document).on('click', '.submit-row', function() {
    // 获取当前点击按钮所在的行
    const $currentRow = $(this).closest('tr');
    // 提取此行的输入值
    const stockValue = $currentRow.find('.stock').val().trim();
    const handValue = $currentRow.find('.hand').val().trim();

    // 前端简单校验：确保输入不为空
    if (!stockValue || !handValue) {
      alert('请填写完整的库存和手持信息！');
      return;
    }

    // 禁用按钮，防止重复提交
    $(this).prop('disabled', true).text('提交中...');

    // 发送AJAX请求到后端处理INSERT
    $.ajax({
      url: '你的后端接口地址', // 比如 submit-row.php
      method: 'POST',
      data: {
        stock: stockValue,
        hand: handValue
      },
      success: function(response) {
        // 提交成功后的反馈：比如标记行状态、提示用户
        alert('此行数据提交成功！');
        $currentRow.addClass('submitted').css('opacity', '0.7');
      },
      error: function() {
        // 提交失败的恢复处理
        alert('提交失败，请重试！');
        $(this).prop('disabled', false).text('提交此行');
      }
    });
  });
});

3. 后端处理示例（以PHP为例） #

后端需要接收AJAX发送的数据，执行SQL INSERT，必须用参数化查询防止SQL注入：

<?php
// submit-row.php
// 假设已完成数据库连接（PDO示例）
$pdo = new PDO('mysql:host=localhost;dbname=你的数据库名', '用户名', '密码');
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

// 获取POST传递的数据
$stock = $_POST['stock'];
$hand = $_POST['hand'];

// 预处理SQL语句，避免注入风险
$stmt = $pdo->prepare("INSERT INTO 你的表名 (stock, hand) VALUES (:stock, :hand)");
$stmt->bindParam(':stock', $stock);
$stmt->bindParam(':hand', $hand);

// 执行插入并返回结果
if ($stmt->execute()) {
  echo json_encode(['success' => true]);
} else {
  echo json_encode(['success' => false]);
}
?>

关键注意事项 #

• 避免重复id：所有行内的表单元素必须用class，不能用id，否则克隆后会引发DOM选择器冲突。
• 防SQL注入：绝对不要直接把用户输入拼接到SQL语句里，一定要用预处理语句。
• 重复提交防护：点击提交后禁用按钮，防止用户多次点击导致重复插入。
• 双向校验：前端做基础校验提升体验，后端做严格校验确保数据安全。

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