如何用JavaScript将textarea输入字符串拆分后按序填入HTML表格Value列

代码修改方案 #

1. 修正HTML重复ID问题

你当前代码中textarea和表格Value列的表头都使用了id="value"，会导致DOM获取元素异常，删除表格表头的id='value'属性即可：

<!-- 修改前 -->
<th id='value'>Value</th>
<!-- 修改后 -->
<th>Value</th>

可选优化：给现有表格增加唯一ID，避免后续页面新增表格时逻辑冲突，修改table标签为：

<table id="flightTable">

2. 替换JS逻辑

你原有的JS逻辑是动态生成新表格，不符合填充现有表格的需求，替换getValue函数为以下代码：

function getValue() {
  // 读取textarea输入内容并去除首尾空格
  const inputContent = document.getElementById("value").value.trim();
  // 按空格分割为数组，自动兼容多个连续空格的场景
  const valueList = inputContent.split(/\s+/);
  // 分割结果显示到demo区域
  document.getElementById("demo").innerText = valueList.join("、");

  // 获取表格所有行，如果你加了表格ID就用 document.getElementById("flightTable").querySelectorAll('tr')
  const tableRows = document.querySelector("table").querySelectorAll("tr");

  // 遍历表格行，跳过第一行表头，从第二行开始填充
  for (let rowIndex = 1; rowIndex < tableRows.length; rowIndex++) {
    // 获取当前行的Value列（第四列，索引为3）
    const valueCell = tableRows[rowIndex].querySelectorAll("td")[3];
    // 数组有对应值就填充，没有就留空
    valueCell.innerText = valueList[rowIndex - 1] || "";
  }
}

功能验证

输入字符串vivek purohit abc xyz提交后，会自动按顺序将四个值填入Value列的第1到第4行，剩余行自动留空。

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