JavaScript如何通过循环获取带递增ID的输入框值（CSV导出场景）

开发者阿泽

2026-5-21

完善循环获取文本框值的方案

看起来你已经有了不错的开头，只需要调整循环的起始索引和逻辑就能搞定啦！你的文本框ID是从text_box_1_name开始递增的，所以循环变量得从1开始，而不是0，这样才能匹配上第一个文本框的ID。

下面是完善后的exportCSV函数代码：

function exportCSV(filename) { 
  var csv = []; 
  // 获取需要处理的文本框数量，记得转成数字类型避免字符串比较问题
  var number_of_names = parseInt(document.getElementById("text_no_of_names").value, 10); 
  csv.push(number_of_names);

  // 循环从1开始，到number_of_names结束（包含）
  for (var i = 1; i <= number_of_names; i++) {
    // 拼接当前文本框的ID
    var textBoxId = `text_box_${i}_name`;
    // 获取对应元素
    var textBox = document.getElementById(textBoxId);
    // 确保元素存在再取值，避免报错
    if (textBox) {
      csv.push(textBox.value.trim()); // 可以加trim()去除首尾空格，按需选择
    } else {
      // 如果元素不存在，可以添加占位符或者跳过，这里示例用空字符串
      csv.push("");
    }
  }

  // 后续可以继续处理csv数组生成CSV文件的逻辑...
}

关键要点说明：

循环索引起始值：因为你的第一个文本框ID是text_box_1_name，所以循环要从i=1开始，到i<=number_of_names结束，这样能覆盖所有目标文本框。
ID拼接：用模板字符串`text_box_${i}_name`来动态生成每个文本框的ID，比传统字符串拼接更简洁易读。
类型转换：把number_of_names转成整数（parseInt），避免因为输入是字符串导致循环条件出错（如果需要更严谨，还可以加输入合法性判断，比如检查是否为有效数字）。
容错处理：添加if(textBox)判断，防止某个ID对应的文本框不存在时抛出错误，让代码更健壮。