如何通过JavaScript实现点击按钮后将输入值添加到HTML表格列

你只需要对现有代码做两处修改即可实现需求：

1. 修改模态框OK按钮属性 #

原按钮默认是submit类型，点击会触发表单提交导致页面刷新，修改为普通按钮：

<button type="button" class="button" ><span>OK</span></button>

2. 新增OK按钮点击处理逻辑 #

将以下代码添加到现有<script>标签的末尾位置：

// 模态框表单提交处理
$(".button").click(function() {
  // 获取用户输入的三个字段值
  const eventParam = $("#Parameter").val();
  const conditionType = $("#Condition").val();
  const matchValue = $("#valuetomatch").val();

  // 简单非空校验，避免空数据提交
  if (!eventParam || !conditionType || !matchValue) {
    alert("请完成所有项的选择和输入后再提交");
    return;
  }

  // 获取表格所有数据行
  const dataRows = $("#form_table tr.case");
  let targetRow = dataRows.last();

  // 判断最后一行是否已填充内容，已填充则新增一行
  if (targetRow.find("input[name='eventpara[]']").val()) {
    // 调用原有新增行逻辑
    $(".addmore").click();
    // 重新获取新增后的最后一行作为目标行
    targetRow = $("#form_table tr.case").last();
  }

  // 将值填充到目标行对应列
  targetRow.find("input[name='eventpara[]']").val(eventParam);
  targetRow.find("input[name='typecondition[]']").val(conditionType);
  targetRow.find("input[name='valuematch[]']").val(matchValue);

  // 提交后关闭模态框，清空表单内容方便下次输入
  modal.style.display = "none";
  $("#Parameter").val("");
  $("#Condition").val("");
  $("#valuetomatch").val("");
});

调整完成后即可完全匹配需求：首次提交会填充第一行空白行，后续提交会自动新增行再填充新值，同时保留原有的手动新增行功能不受影响。

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