如何不硬编码数组下标获取输入框值并适配动态表格行

1. 先修正HTML结构（避免重复ID） #

HTML规范要求元素ID必须唯一，动态新增行时不能重复使用OBJ_TYPE这类ID，建议改用name属性来标识同类型输入框，比如每行的输入结构如下：

<table>
  <tr class="input-row">
    <td>
      <input
        type="text"
        name="DEPLOYER_PROJECT"
        class="vcheck"
        placeholder="Project Name"
      >
    </td>
    <td>
      <input
        type="text"
        name="OBJ_TYPE"
        class="vcheck"
        placeholder="OBJ Type"
      >
    </td>
  </tr>
  <!-- 动态新增的行结构完全一致即可 -->
</table>

2. 按行分组获取输入值 #

通过行元素分组，在每行内精准定位对应输入框，完全摆脱数组下标依赖：

// 遍历所有输入行
$('.input-row').each(function(rowIndex) {
  // 在当前行内查找指定name的输入框
  const projectValue = $(this).find('[name="DEPLOYER_PROJECT"]').val().trim();
  const objTypeValue = $(this).find('[name="OBJ_TYPE"]').val().trim();

  // 打印当前行的对应值
  console.log(`行 ${rowIndex+1}: DEPLOYER_PROJECT = ${projectValue}, OBJ_TYPE = ${objTypeValue}`);
});

3. 适配动态行的数据库插入 #

先收集所有行的有效数据，再构造批量插入的SQL语句（临时实现建议简单转义单引号避免语法错误）：

const dataRows = [];

$('.input-row').each(function() {
  // 简单转义单引号，防止SQL语法错误（正式环境务必用参数化查询）
  const project = $(this).find('[name="DEPLOYER_PROJECT"]').val().trim().replace(/'/g, "''");
  const objType = $(this).find('[name="OBJ_TYPE"]').val().trim().replace(/'/g, "''");

  // 跳过空行（可选）
  if (project || objType) {
    dataRows.push(`('${project}', '${objType}')`);
  }
});

// 构造并执行批量插入语句
if (dataRows.length > 0) {
  const insertSql = `INSERT INTO TABLE(DEPLOYER_PROJECT, OBJ_TYPE) VALUES ${dataRows.join(', ')}`;
  DB(insertSql);
}

关键说明 #

• 用name属性替代重复ID：既符合HTML规范，又能精准分组同类型输入框
• 按行查找输入：不管新增多少行，都能保证每行的字段对应关系正确，完全不用关心数组下标变化
• 批量插入：比单行多次插入效率更高，也更适配动态行的场景

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