动态创建表格时如何为input元素设置唯一ID及ID数组放置位置

我明白你的需求啦——要给每一行新增的三个输入框设置不重复的ID，其实完全不需要额外维护一个ID数组，直接利用循环里的索引或者一个简单的计数器就能搞定，下面给你两种实用的方案：

方案1：结合行号生成ID（最直观） #

在你的displayHTMLTable函数里，外层循环的i就是当前行的索引（从0开始递增），我们可以把这个索引拼到ID里，这样每行的三个输入框ID都会是唯一的，比如第一行的三个输入框ID是input1_0、input2_0，第二行是input1_1、input2_1，以此类推。

修改代码中生成输入框的部分：

// 替换原来的三行input代码
table += `<td><input type='text' name='input1_${i}' id='input1_${i}' size='2'></td>`;
table += `<td><input type='text' name='input2_${i}' id='input2_${i}' size='2'></td>`;
table += `<td><input type='text' name='input3_${i}' id='input3_${i}' size='7'></td>`;

这种方式的好处是ID能直接反映所属的行，之后你要获取某行的输入框值时，比如获取第二行的第一个输入框，直接用$('#input1_1').val()就可以了。

方案2：用全局计数器生成连续ID（符合你想要的input[J]格式） #

如果你更倾向于input[0]、input[1]这种连续编号的ID，可以在循环外定义一个计数器，每生成一个输入框就递增计数器的值：

修改后的displayHTMLTable函数关键部分：

function displayHTMLTable(results) {
  var table = "<table id='table_data' class='table table-bordered' width='90%'>";
  var data = results.data;
  var size = -1;
  var check1 = 1;
  var check2 = 100;
  var inputCounter = 0; // 新增一个全局计数器，从0开始
  table += "<tbody>";
  
  for (i = 0; i < data.length; i++) {
    table += "<tr>";
    var row = data[i];
    var cells = row.join(";").split(";").filter(cell => cell.trim() !== "");
    
    // 省略原有判断逻辑...
    
    else {
      // 省略原有单元格生成逻辑...
      
      // 生成第一个输入框，ID为input[0], input[1]...
      table += `<td><input type='text' name='input[${inputCounter}]' id='input[${inputCounter}]' size='2'></td>`;
      inputCounter++;
      table += `<td><input type='text' name='input[${inputCounter}]' id='input[${inputCounter}]' size='2'></td>`;
      inputCounter++;
      table += `<td><input type='text' name='input[${inputCounter}]' id='input[${inputCounter}]' size='7'></td>`;
      inputCounter++;
    }
    table += "</tr>";
  }
  
  // 省略后续表格拼接逻辑...
}

注意：如果用这种带方括号的ID，之后用jQuery选择器获取元素时，需要转义方括号，比如$('input[id="input[0]"]').val()，或者直接用属性选择器$('input[name="input[0]"]')。

两种方案都不需要额外的ID数组，直接利用循环中的变量就能生成唯一标识，既简洁又容易维护～

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