如何通过jQuery将第二个表单的数据追加到指定HTML表格

• 原有点击事件的取值逻辑硬编码了固定选择器，始终读取#name、#sname两个第一个表单的输入元素，没有区分点击按钮对应的所属表单，因此无论触发哪个按钮，拿到的都是第一个表单的输入值。
• 另外原代码存在两处小问题：表头的<tr>标签未闭合、多行HTML字符串拼接的写法可读性差且容易出错。

方案1：适配现有双表单结构的快速改法 #

直接拆分两个按钮的点击事件，各自明确读取对应表单的输入值，代码改动最小：

$(document).ready(function() {
  let id = 1;
  const $tableBody = $("#table1 tbody");

  // 第一个表单按钮的点击逻辑
  $("#butsend").click(function() {
    const newid = id++;
    const name = $("#name").val().trim();
    const surname = $("#sname").val().trim();

    // 增加空值校验，避免渲染无效空行
    if (!name || !surname) return;

    $tableBody.append(`
      <tr valign="top" id="row_${newid}">
        <td width="100px">${newid}</td>
        <td width="100px" class="name${newid}">${name}</td>
        <td width="100px" class="sname${newid}">${surname}</td>
      </tr>
    `);
  });

  // 第二个表单按钮的点击逻辑
  $("#butsend2").click(function() {
    const newid = id++;
    const name = $("#name2").val().trim();
    const surname = $("#sname2").val().trim();

    if (!name || !surname) return;

    $tableBody.append(`
      <tr valign="top" id="row_${newid}">
        <td width="100px">${newid}</td>
        <td width="100px" class="name${newid}">${name}</td>
        <td width="100px" class="sname${newid}">${surname}</td>
      </tr>
    `);
  });
});

方案2：可扩展的通用改法（适合后续新增更多表单） #

如果后续还要加更多同结构的表单，不需要重复写重复的事件逻辑，只需要给所有提交按钮加统一类名，通过当前触发的按钮定位所属表单即可：

1. 先给两个提交按钮统一加公共类add-row-btn：

<!-- 第一个表单的按钮 -->
<input type="button" name="send" class="btn btn-primary add-row-btn" value="add data" id="butsend">
<!-- 第二个表单的按钮 -->
<input type="button" name="send2" class="btn btn-primary add-row-btn" value="add data2" id="butsend2">

2. 统一绑定点击事件的逻辑：

$(document).ready(function() {
  let id = 1;
  const $tableBody = $("#table1 tbody");

  $(".add-row-btn").click(function() {
    const newid = id++;
    // 通过当前点击按钮向上查找所属的表单元素
    const $currentForm = $(this).closest('form');
    // 从当前表单内部匹配对应的输入框，无需关心表单数量
    const name = $currentForm.find('input[name*="name"]').val().trim();
    const surname = $currentForm.find('input[name*="sname"]').val().trim();

    if (!name || !surname) return;

    $tableBody.append(`
      <tr valign="top" id="row_${newid}">
        <td width="100px">${newid}</td>
        <td width="100px" class="name${newid}">${name}</td>
        <td width="100px" class="sname${newid}">${surname}</td>
      </tr>
    `);
  });
});

如果后续要实现从数据库拉取数据再渲染的需求，只需要在上述点击事件的逻辑中，替换掉读取前端输入值的部分为Ajax请求即可：比如在事件内加$.get('你的后端接口地址', {请求参数}, function(res) { /* 用返回的res字段替代上面的name、surname变量 */ })，表格渲染的逻辑不需要调整。

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