如何在具有相同ID的所有td上输出值?

时间:2018-06-27 09:23:25

标签: javascript html-table

如何在具有相同ID的所有calendarId: encodeURIComponent(id) 中输出值? 我想对下拉列表1和下拉列表2的值求和,然后将其输出到具有相同ID的单元格中。到目前为止,我已经使其仅在第一个单元格中输出。

td
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);
}

1 个答案:

答案 0 :(得分:2)

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>