Question

这是我的示例HTML表单，带有多维输入字段

<tr>
    <td><input name="diameter[0][top]" type="text" id="diameter_top0" size="5" class="diameter" /></td>
    <td><input name="diameter[0][bottom]" type="text" id="diameter_bottom0" size="5" class="diameter" /></td>
</tr>
<tr>
    <td><input name="diameter[1][top]" type="text" id="diameter_top1" size="5" class="diameter" /></td>
    <td><input name="diameter[1][bottom]" type="text" id="diameter_bottom1" size="5" class="diameter" /></td>
</tr>
<tr>
    <td><input name="diameter[5][top]" type="text" id="diameter_top5" size="5" class="diameter" /></td>
    <td><input name="diameter[5][bottom]" type="text" id="diameter_bottom5" size="5" class="diameter" /></td>
</tr>

可以说我正在写ID diameter_bottom5输入。而且onkeyup我需要输入字段的索引diameter。在此示例中为5。

我不想在regex或slice属性中使用name或id。

我不想创建自定义属性来存储索引。

如何获取当前正在使用JavaScript输入的多维输入字段数组索引？

Answer 1

如果您还可以使用表数据的“顺序索引”，您可以像这样操作（很明显，如果您的“编号”与给定的顺序和/或输入量不匹配，这将不起作用）：

const tableData = [...document.getElementById('myTable').getElementsByTagName('td')]

tableData.forEach((item, i) => item.addEventListener('keyup', () => {
  console.log(i)
}), false);

<table id='myTable'>
  <tr>
    <td><input name="diameter[0][top]" type="text" id="diameter_top0" size="5" class="diameter" /></td>
    <td><input name="diameter[0][bottom]" type="text" id="diameter_bottom0" size="5" class="diameter" /></td>
  </tr>
  <tr>
    <td><input name="diameter[1][top]" type="text" id="diameter_top1" size="5" class="diameter" /></td>
    <td><input name="diameter[1][bottom]" type="text" id="diameter_bottom1" size="5" class="diameter" /></td>
  </tr>
  <tr>
    <td><input name="diameter[5][top]" type="text" id="diameter_top5" size="5" class="diameter" /></td>
    <td><input name="diameter[5][bottom]" type="text" id="diameter_bottom5" size="5" class="diameter" /></td>
  </tr>
</table>

如何使用JavaScript获取多维输入字段数组索引？

1 个答案: