javascript - 为什么我的 JavaScript 只在表格的第一行工作？

Question

嘿，大家好，我的 javascript 代码有问题。它仅适用于表格的第一行，不适用于其余行。

<div id="Q2">
  <table>
    <tr class="headtop">
      <th>Name</th>
      <th>Section</th>
      <th>3rd Quarter Grades</th>
      <th>4th Quarter Grades</th>
      <th> Semester Average</th>
      <th></th>
    </tr>
    <?php
$sql = $conn2->query("SELECT  Name, Section, Initial1, Initial2, Final, id FROM " .$subid. " ORDER BY Name");
if ($sql->num_rows > 0) {
while ($row = $sql->fetch_assoc())  {
echo "<form method='POST' action='savesem1.php'>";
echo "<tr>";
echo "<td>" .str_replace('!', ' ', str_replace('_', ' ', $row["Name"])). "</td>";
echo "<td>" .$row["Section"]. "</td>";
echo "<td><input  name='I1sem2G11' id='I1sem2G11' onChange='CD();' value='" .$row["Initial1"]. "'/></td>";
echo "<td><input  name='I2sem2G11' id='I2sem2G11' onChange='CD();' value='" .$row["Initial2"]. "'/></td>";
echo "<td><input  name='Finalsem2G11' id='Finalsem2G11'  value='" .$row["Final"]. "'  /></td>";
echo "<td><input type='submit' name='submitcardsem2G11' id='submitcardsem2G11' class='btnupdate' value='Save Changes'></td>";   
echo "<td><input type='hidden' name='idsem2G11' id='idsem2G11' value='" .$row["id"]. "'/></td>";
echo "<td><input type='hidden' name='y' id='y' value='" .$subid. "'/></td>";    
echo "</tr>";
echo "</form>"; 
}
} else { echo ""; }
?>
  </table>
</div>

这是 JavaScript，其目的是获取两个输入的平均值并将其放入另一个输入中

function CD() {
  var C = $("#I1sem2G11").val();
  var D = $("#I2sem2G11").val();
  var CD = (+C + +D) / 2;
  document.getElementById("Finalsem2G11").value = CD;
}

Answer 1

您的问题是 ID 重复

我对 <form> 不太满意包装<tr>也可以，但它有效

$("#tb").on("input", "input", function() {
  const $row = $(this).closest("tr");
  const C = $row.find("[name=I1sem2G11]").val();
  const D = $row.find("[name=I2sem2G11]").val();
  const CD = (+C + +D) / 2;
  console.log(C,D,CD)
  $row.find("[name=Finalsem2G11]").val(CD);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="Q2">
  <table>
    <tr class="headtop">
      <th>Name</th>
      <th>Section</th>
      <th>3rd Quarter Grades</th>
      <th>4th Quarter Grades</th>
      <th> Semester Average</th>
      <th></th>
    </tr>
    <tbody id="tb">
      <form method='POST' action='savesem1.php'>
        <tr>
          <td>Name1</td>
          <td>Section1</td>
          <td><input name='I1sem2G11' value='10' /></td>
          <td><input name='I2sem2G11' value='21' /></td>
          <td><input name='Finalsem2G11' id='Finalsem2G11' value='0' /></td>
          <td><input type='submit' name='submitcardsem2G11' class='btnupdate' value='Save Changes'></td>
          <td><input type='hidden' name='idsem2G11' value='id1' /></td>
          <td><input type='hidden' name='y' id='y' value='subid1' /></td>
        </tr>
      </form>
      <form method='POST' action='savesem1.php'>
        <tr>
          <td>Name2</td>
          <td>Section2</td>
          <td><input name='I1sem2G11' value='11' /></td>
          <td><input name='I2sem2G11' value='22' /></td>
          <td><input name='Finalsem2G11' value='0' /></td>
          <td><input type='submit' name='submitcardsem2G11' class='btnupdate' value='Save Changes'></td>
          <td><input type='hidden' name='idsem2G11' value='id2' /></td>
          <td><input type='hidden' name='y' id='y' value='subid2' /></td>
        </tr>
      </form>
    </tbody>
  </table>
</div>