根据页面（单元格）中的位置执行 JavaScript 函数？答案

【问题标题】：Perform JavaScript function based on location in page (cells)?根据页面（单元格）中的位置执行 JavaScript 函数？
【发布时间】：2018-07-04 04:15:00
【问题描述】：

我有一个页面，用于收集学生将参加的课程，并在表格中同时显示 Course Title 和 Catalog Number。如果学生选择了Course Title，它将自动在下一个单元格中填写Catalog Number 的内容，反之亦然。

我遇到的唯一问题是，当您填写一个Course Title 时，它会填满每个Catalog Number 单元格（反之亦然）。

<body>
  <table>
    <tbody>
      <tr>
        <td>
          <input list="courses" name="courseInput" placeholder="Course" oninput="UpdateCatNumbers()">
          <datalist id="courses" name="courseDatalist">
		<!--Filled in script-->					
	  </datalist>
        </td>
        <td>
          <input list="catalogs" name="catalogInput" placeholder="Catalog Number" id="catalogID" oninput="UpdateCourseNames()">
          <datalist id="catalogs" name="catalogDatalist">
		<!--Filled in script-->
	  </datalist>
        </td>
      </tr>
      <tr>
        <td><input list="courses" name="courseInput" placeholder="Course" oninput="UpdateCatNumbers()"></td>
        <td><input list="catalogs" name="catalogInput" placeholder="Catalog Number" id="catalogID" oninput="UpdateCourseNames()"></td>
      </tr>
      <tr>
        <td><input list="courses" name="courseInput" placeholder="Course" oninput="UpdateCatNumbers()"></td>
        <td><input list="catalogs" name="catalogInput" placeholder="Catalog Number" id="catalogID" oninput="UpdateCourseNames()"></td>
      </tr>
      <tr>
        <td><input list="courses" name="courseInput" placeholder="Course" oninput="UpdateCatNumbers()"></td>
        <td><input list="catalogs" name="catalogInput" placeholder="Catalog Number" id="catalogID" oninput="UpdateCourseNames()"></td>
      </tr>
    </tbody>
  </table>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="testTemplateJS.js"></script>
  <script>
    //Course Names
    var courseNames = ["Class A", "Class B", "Class C", "Class D", "Class E"];
    var list = $('#courses')[0];

    courseNames.forEach(function(item) {
      var option = document.createElement('option');
      option.value = item;
      list.appendChild(option);
    });
  </script>
  <script>
    //Catalog Numbers
    var catNumbers = ["Catalog 1", "Catalog 2", "Catalog 3", "Catalog 4", "Catalog 5"];
    var list = $('#catalogs')[0];

    catNumbers.forEach(function(item) {
      var option = document.createElement('option');
      option.value = item;
      list.appendChild(option);
    });
  </script>
  <script>
    function UpdateCatNumbers() {
      //on change of courseInput, run...
      $("input[name=courseInput]").change(function() {
        //declare a as the array index # of courseNames
        var a = courseNames.indexOf($(this).val());
        //change catalog input to display the same array index of catNumbers
        $("input[name=catalogInput]").val(catNumbers[a]);
      });
    }
  </script>
  <script>
    function UpdateCourseNames() {
      $("input[name=catalogInput]").change(function() {
        var b = catNumbers.indexOf($(this).val());
        $("input[name=courseInput]").val(courseNames[b]);
      });
    }
  </script>
</body>

如何获得它，以便 UpdateCatNumbers() 和 UpdateCourseNames() 函数仅填充它们旁边的单元格？

【问题讨论】：

标签： javascript jquery html html-table datalist

【解决方案1】：

因此，您只需将该值应用于另一个输入。在这种情况下，您可以使用 jQuery eq(index) - 使用它，您可以根据索引从 jQuery 集合中选择单个元素：

$("input[name=courseInput]").each(function(index) {
    $(this).change(function() {
        var a = courseNames.indexOf($(this).val());

        $("input[name=catalogInput]").eq(index).val(catNumbers[a]);
    )};
});

【讨论】：

唯一的问题是当我将 'a' 分配给 eq(index) 时，它引用了 datalist 数组的索引，而不是特定的输入。关于如何指定它引用输入框的索引有什么想法吗？
已编辑 - 包含在 $.each 中以获取基于 jQuery 集合的 index。