根据页面（单元格）中的位置执行 JavaScript 功能？

Question

我有一个收集页面，类学生将使用该页面并在 table 中显示 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() 函数只填充紧挨着它们的单元格？

Answer 1

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

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

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

根据页面（单元格）中的位置执行 JavaScript 功能？

Perform JavaScript function based on location in page (cells)?

html

javascript

jquery

html-table

datalist