Как имея таблицу HTML добавить туда суму значений с помощью JS?

Question

У нас есть таблица в HTML и последняя строка под названием "Итого". Нужно написать сценарий, которым выведем во вторую ячейку этой строки сумму всех числовых значений второй колонки, а в третью ячейку этой строки выведем сумму всех числовых значений из третьей колонки таблицы.

В div с id result нужно вывести сообщение "Отдел 1 сделал больше продаж" или "Отдел 2 сделал больше продаж" на основе раннее вычисленных значений в строке "Итого".

<body>
    <table id="statsTable">
        <tr>
            <th>Месяц</th>
            <th>Отдел 1</th>
            <th>Отдел 2</th>
        </tr>
        <tr>
            <td>Январь</td>
            <td>50</td>
            <td>120</td>
        </tr>
        <tr>
            <td>Февраль</td>
            <td>60</td>
            <td>140</td>
        </tr>
        <tr>
            <td>Март</td>
            <td>125</td>
            <td>115</td>
        </tr>
        <tr>
            <td>Апрель</td>
            <td>87</td>
            <td>100</td>
        </tr>
        <tr>
            <td>Март</td>
            <td>95</td>
            <td>80</td>
        </tr>
        <tr>
            <td>Июнь</td>
            <td>115</td>
            <td>90</td>
        </tr>
        <tr>
            <td>Июль</td>
            <td>125</td>
            <td>100</td>
        </tr>
        <tr>
            <th>Итого</th>
            <th></th>
            <th></th>
        </tr>
        
    </table>

    <div id="result"></div>

    <script>


    </script>
</body>

Answer 1

const table = document.getElementById('statsTable')

const sum = (column) =>
  [...table.querySelectorAll(`td:nth-child(${column})`)]
    .map((v) => Number.parseFloat(v.textContent))
    .reduce((a, v) => a + v)

const set = (column, value) =>
  table.querySelector(`:last-child>th:nth-child(${column})`)
    .textContent = value

const department1 = sum(2)
const department2 = sum(3)
set(2, department1)
set(3, department2)

document.getElementById('result')
  .textContent = `Отдел ${department1 > department2 ? 2 : 1} и @Dima ленивые бездельники.`

<table id="statsTable">
  <tr>
    <th>Месяц</th>
    <th>Отдел 1</th>
    <th>Отдел 2</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>50</td>
    <td>120</td>
  </tr>
  <tr>
    <td>Февраль</td>
    <td>60</td>
    <td>140</td>
  </tr>
  <tr>
    <td>Март</td>
    <td>125</td>
    <td>115</td>
  </tr>
  <tr>
    <th>Итого</th>
    <th></th>
    <th></th>
  </tr>
</table>
<div id="result"></div>

БЛОГ НА HUSL

Как имея таблицу HTML добавить туда суму значений с помощью JS?

Ответы (1 шт):