代码之家 › 专栏 › 技术社区 › Boby Marley

如何输出相同ID的所有TD的值?

html-table javascript

-4

Boby Marley · 技术社区 · 7 年前

我怎样才能输出所有的值 td 有相同的身份证吗? 我想对dropdown 1和dropdown 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>

1 回复 | 直到 7 年前

1

2

Ivan Jeffrey Zhao 7 年前

身份证必须是 独特的 是的。

这个 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>