Как вывести значение на всех тд с одинаковым идентификатором? - PullRequest
Новая
       1

Как вывести значение на всех тд с одинаковым идентификатором?

0 голосов
/ 27 июня 2018

Как вывести значения во всех td с одинаковым идентификатором? Я хочу суммировать значение раскрывающегося списка 1 и раскрывающегося списка 2 и вывести его в ячейки с одинаковым идентификатором. До сих пор я сделал это для вывода только в первой ячейке. 

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 Ответ

0 голосов
/ 27 июня 2018

Идентификаторы должны быть уникальными .

Глобальный атрибут id определяет уникальный идентификатор, который должен быть уникальным во всем документе .

Вы можете сделать это, используя class names вместо 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...