如何在JavaScript中获取动态HTML表格内文本框的内容

我来帮你搞定这个问题！你需要在点击Submit按钮时获取动态生成表格里所有文本框的内容，对吧？下面是具体的实现方法，两种写法供你选择：

实现思路 #

因为表格是动态添加/删除行的，没法用固定ID定位输入框，所以我们可以借助表格元素或者统一的name属性来批量获取输入框内容——毕竟你每行的文本框都用了txt[]、time[]这种统一命名，刚好方便我们定位。

具体代码实现 #

写法一：遍历表格行获取（直观易扩展） #

这种方式适合需要对每行做额外处理的场景，比如单独验证某行的输入：

function myFunction() {
  // 获取目标表格
  const table = document.getElementById('dataTable');
  // 存储所有行数据的数组
  const allRowData = [];

  // 遍历表格的每一行
  for (let i = 0; i < table.rows.length; i++) {
    const currentRow = table.rows[i];
    
    // 在当前行内定位对应的输入框
    const textInput = currentRow.querySelector('input[name="txt[]"]');
    const timeInput = currentRow.querySelector('input[name="time[]"]');
    const checkbox = currentRow.querySelector('input[name="chk[]"]');

    // 收集当前行的所有数据，包含复选框选中状态
    allRowData.push({
      inputText: textInput.value.trim(),
      inputTime: timeInput.value.trim(),
      isSelected: checkbox.checked
    });
  }

  // 打印结果，你可以在这里替换成提交到后端的逻辑
  console.log('所有行的文本框内容:', allRowData);
  
  // 示例：提交到后端（按需使用）
  // fetch('/your-submit-api', {
  //   method: 'POST',
  //   headers: { 'Content-Type': 'application/json' },
  //   body: JSON.stringify(allRowData)
  // });
}

写法二：批量获取输入框（简洁高效） #

这种写法利用统一的name属性直接获取所有同类输入框，代码更简洁，适合不需要单独处理每行的场景：

function myFunction() {
  // 批量获取所有对应name的输入框
  const textInputs = document.querySelectorAll('input[name="txt[]"]');
  const timeInputs = document.querySelectorAll('input[name="time[]"]');
  const checkboxes = document.querySelectorAll('input[name="chk[]"]');

  // 把输入框的值按行对应，生成数据数组
  const rowData = Array.from(textInputs).map((input, index) => ({
    text: input.value.trim(),
    time: timeInputs[index].value.trim(),
    selected: checkboxes[index].checked
  }));

  console.log('整理后的数据:', rowData);
}

额外需求：只获取选中行的内容 #

如果你只需要处理被复选框选中的行，只需要在收集数据时加个判断即可。比如在写法一中修改：

// 仅收集选中行的数据
if (checkbox.checked) {
  allRowData.push({
    inputText: textInput.value.trim(),
    inputTime: timeInput.value.trim()
  });
}

这样就只会把选中行的文本框内容存入数组啦。

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