如何在所有具有相同 id 的 td 上输出值？答案

【问题标题】：How to output value on all td's with same id?如何在所有具有相同 id 的 td 上输出值？
【发布时间】：2018-06-27 18:29:42
【问题描述】：

如何输出具有相同 ID 的所有 td 中的值？我想对下拉列表 1 和下拉列表 2 的值求和，并将其输出到具有相同 id 的单元格中。到目前为止，我只在第一个单元格中输出。

function myFunction() {
  var sum = document.getElementById("month").value;
  var sumo = document.getElementById("year").value;
  var p = Math.floor(Number(sum) + Number(sumo));
  console.log(p);
  $("#sum").html(p);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="style.css">
  <script src="Jquery.js"></script>
</head>

<body onload="myFunction()">
  <div id="output">
    <form action="/action_page.php">
      <select name="date" id="month" onchange="myFunction()">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>
      <br><br>
      <select name="year" id="year" onchange="myFunction()">
        <option value="2017">2017</option>
        <option value="2018">2018</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>
      <br><br>
    </form>
  </div>
  <table>
    <tr id="num">
      <td id="sum">1</th>
        <td id="sum">1</th>
          <td id="sum">1</th>
    </tr>
  </table>
</body>

</html>

【问题讨论】：

all td's with same id? 那是无效的 HTML。
$("td[id^='sum']").html(p); 会帮助你。
你为什么不使用 class 而不是你同样的 id
是的，我忘了上课。谢谢你们的帮助。
@BobyMarley，请不要忘记阅读、投票和/或接受答案，因为这将有助于未来的用户并鼓励其他用户做出回应。谢谢。

标签： javascript html-table

【解决方案1】：

ID 必须是唯一的。

id 全局属性定义了一个唯一标识符，该标识符必须在整个文档中是唯一的。

您可以改为使用 class 名称。

function myFunction() {
  var sum = document.getElementById("month").value;
  var sumo = document.getElementById("year").value;
  var p = Math.floor(Number(sum) + Number(sumo));
  console.log(p);
  $.each($('.myClassName'), function() {
    this.innerHTML = p;

  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="style.css">
  <script src="Jquery.js"></script>
</head>

<body onload="myFunction()">
  <div id="output">
    <form action="/action_page.php">
      <select name="date" id="month" onchange="myFunction()">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>
      <br><br>
      <select name="year" id="year" onchange="myFunction()">
        <option value="2017">2017</option>
        <option value="2018">2018</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>
      <br><br>
    </form>
  </div>
  <table>
    <tr id="num">
      <td class="myClassName" id="sum1">1</th>
        <td class="myClassName" id="sum2">1</th>
          <td class="myClassName" id="sum3">1</th>
    </tr>
  </table>
</body>

</html>

【讨论】：