сумма строки таблицы до html с js - PullRequest
Новая
       15

сумма строки таблицы до html с js

0 голосов
/ 11 июля 2020

Я сделал простую таблицу только с двумя строками, которые позволяют пользователю вводить числа.

Числа для каждой строки складываются и возвращают две суммы, по одной для каждой строки. Проблема в том, что я могу выполнять эту работу, только если я console.log. Я не могу понять это правильно, когда возвращаю его на свой html.

Я знаю, что здесь есть похожие сообщения, но все они используют jQuery или что-то, что я действительно не считаю подходящим для моей проблемы . Но если вы найдете это дубликат, мне очень жаль.

Спасибо за ваше время! 

// Reference the first (and only for the moment) form
let f0 = document.forms[0];
// Collect all form controls of f0
let F = f0.elements;

f0.onchange = editData;

function editData() {
  const table = document.querySelector("#tableID");
  allrows = table.getElementsByTagName("tr");
  let sum = document.querySelector("#sum");

  for (i = 1; i < allrows.length; i++) {
    rowTotal = 0;
    for (ii = 0; ii < allrows[i].getElementsByTagName("input").length; ii++) {
      rowTotal =
        rowTotal + Number(allrows[i].getElementsByTagName("input")[ii].value);
    }

    sum.innerHTML = rowTotal; // I can see this won't work, but I can't seem to find a solution

    console.log(rowTotal); // this is the total of each row
  }
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  height: 100%;
  width: 100%;
  background-color: #dbc5a7;
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
table {
  margin-top: 100px;
  padding: 10px;
  height: 30vh;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

tr {
  height: 30px;
}
td {
  text-align: center;
  font-size: 15px;
}
input {
  width: 75%;
  text-align: center;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/css/main.css" />
    <title>Document</title>
  </head>
  <body>
    <form id="F0">
      <table id="tableID">
        <caption>
          header
        </caption>
        <!-- First Row -->
        <tr>
          <th scope="col"></th>
          <th scope="col">Phase 1</th>
          <th scope="col">Phase 2</th>
          <th scope="col">Phase 3</th>
          <th scope="col">Phase 4</th>
          <th scope="col">Total Row</th>
        </tr>
        <!-- Second Row -->
        <tr>
          <th scope="row">Input Row 1</th>
          <td>
            <input type="number" value="2" />
          </td>
          <td>
            <input type="number" value="0" />
          </td>
          <td>
            <input type="number" value="1" />
          </td>
          <td>
            <input type="number" value="3" />
          </td>
          <td>
            <p id="sum">0</p>
          </td>
        </tr>
        <!-- Third Row -->
        <tr>
          <th scope="row">Input Row 2</th>
          <td>
            <input type="number" value="5" />
          </td>
          <td>
            <input type="number" value="1" />
          </td>
          <td>
            <input type="number" value="0" />
          </td>
          <td>
            <input type="number" value="2" />
          </td>
          <td>
            <p id="sum">0</p>
          </td>
        </tr>
      </table>
    </form>
    <script src="app.js"></script>
  </body>
</html>

1 Ответ

0 голосов
/ 11 июля 2020

Не давайте двум элементам одинаковый идентификатор; идентификаторы должны быть уникальными на странице. Вместо этого вы можете использовать класс и использовать .querySelector в каждой строке для получения элемента.

Если вы указали каждому элементу p, используемому для отображения общей суммы класса, ваш код будет отображать результат будет просто: 

allrows[i].querySelector('.sum').innerHTML = rowTotal;

Демо: 

// Reference the first (and only for the moment) form
let f0 = document.forms[0];
// Collect all form controls of f0
let F = f0.elements;

f0.onchange = editData;

function editData() {
  const table = document.querySelector("#tableID");
  allrows = table.getElementsByTagName("tr");
  let sum = document.querySelector("#sum");

  for (let i = 1; i < allrows.length; i++) {
    rowTotal = 0;
    for (let ii = 0; ii < allrows[i].getElementsByTagName("input").length; ii++) {
      rowTotal =
        rowTotal + Number(allrows[i].getElementsByTagName("input")[ii].value);
    }

    allrows[i].querySelector('.sum').innerHTML = rowTotal;
  }
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  height: 100%;
  width: 100%;
  background-color: #dbc5a7;
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
table {
  margin-top: 100px;
  padding: 10px;
  height: 30vh;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

tr {
  height: 30px;
}
td {
  text-align: center;
  font-size: 15px;
}
input {
  width: 75%;
  text-align: center;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/css/main.css" />
    <title>Document</title>
  </head>
  <body>
    <form id="F0">
      <table id="tableID">
        <caption>
          header
        </caption>
        <!-- First Row -->
        <tr>
          <th scope="col"></th>
          <th scope="col">Phase 1</th>
          <th scope="col">Phase 2</th>
          <th scope="col">Phase 3</th>
          <th scope="col">Phase 4</th>
          <th scope="col">Total Row</th>
        </tr>
        <!-- Second Row -->
        <tr>
          <th scope="row">Input Row 1</th>
          <td>
            <input type="number" value="2" />
          </td>
          <td>
            <input type="number" value="0" />
          </td>
          <td>
            <input type="number" value="1" />
          </td>
          <td>
            <input type="number" value="3" />
          </td>
          <td>
            <p class="sum">0</p>
          </td>
        </tr>
        <!-- Third Row -->
        <tr>
          <th scope="row">Input Row 2</th>
          <td>
            <input type="number" value="5" />
          </td>
          <td>
            <input type="number" value="1" />
          </td>
          <td>
            <input type="number" value="0" />
          </td>
          <td>
            <input type="number" value="2" />
          </td>
          <td>
            <p class="sum">0</p>
          </td>
        </tr>
      </table>
    </form>
    <script src="app.js"></script>
  </body>
</html>
...