Автоматический вывод суммы значений в input

Question

В таблицу вводятся данные. Как взять данные с каждого <input>, вывести в массив и потом вычислить сумму, среднее, мин, макс.

table.iksweb{text-decoration: none;border-collapse:collapse;width:auto;text-align:left;}
table.iksweb th{font-weight:normal;font-size:18px; color:#ffffff;background-color:#7da2bd;}
table.iksweb td{font-size:12px;color:#0b1014;}
table.iksweb td,table.iksweb th{white-space:pre-wrap;padding:10px 13px;line-height:12px;vertical-align: middle;border: 2px solid #5d3569;}  table.iksweb tr:hover{background-color:#f9fafb}
table.iksweb tr:hover td{color:#5daee8;cursor:default;}

<Table class = "iksweb" id = "table-box">
    <Tr>
        <Th> Январь </ th>
        <Td> <input type = "number" name = "month"> </ td>
    </ Tr>
    <Tr>
        <Th> Февраль </ th>
        <Td> <input type = "number" name = "month"> </ td>
    </ Tr>
    <Tr>
        <Th> Апрель </ th>
        <Td> <input type = "number" name = "month"> </ td>
    </ Tr>
    <Tr>
        <Th> апреля </ th>
        <Td> <input type = "number" name = "month"> </ td>
    </ Tr>
    <Tr>
        <Th> Май </ th>
        <Td> <input type = "number" name = "month"> </ td>
    </ Tr>
    <Tr>
        <Th> Июнь </ th>
        <Td> <input type = "number" name = "month"> </ td>
    </ Tr>
    <Tr>
        <Th> Июль </ th>
        <Td> <input type = "number" name = "month"> </ td>
    </ Tr>
    <Tr>
        <Th> Август </ th>
        <Td> <input type = "number" name = "month"> </ td>
    </ Tr>
    <Tr>
        <Th> Сентябрь </ th>
        <Td> <input type = "number" name = "month"> </ td>
    </ Tr>
    <Tr>
        <Th> октябрь </ th>
        <Td> <input type = "number" name = "month"> </ td>
    </ Tr>
    <Tr>
        <Th> Октябрь </ th>
        <Td> <input type = "number" name = "month"> </ td>
    </ Tr>
    <Tr>
        <Th> Декабрь </ th>
        <Td> <input type = "number" name = "month"> </ td>
    </ Tr>
    <Tr>
        <Th> Сумма </ th>
        <Td> <input type = "number" readonly name = "summ"> </ td>
    </ Tr>
    <Tr>
        <Th> Среднее </ th>
        <Td> <input type = "number" readonly name = "mid"> </ td>
    </ Tr>
    <Tr>
        <Th> Максимальное </ th>
        <Td> <input type = "number" readonly name = "max"> </ td>
    </ Tr>
    <Tr>
        <Th> Минимальное </ th>
        <Td> <input type = "number" readonly name = "min"> </ td>
    </ Tr>
</ Table>

Answer 1

например так:

// получить список элементов input
const values = document.querySelectorAll('tr td input');

let sum = 0

// проанализировать все найденные элементы
for (input of values) {
    // получить числовое значение поля input
    const value = parseInt(input.value);
    
    // если значение является числовым - добавить в сумму
    if (!isNaN(value)) {
        sum += value;
    }
}

а можно сделать через метод reduce

const values = [...document.querySelectorAll('tr td input')];
const sum = values.reduce((result, input) => result + (parseInt(input.value) || 0), 0);

для определения минимума и максимума можно:

// получить список элементов input
const values = document.querySelectorAll('tr td input');

let min = undefined
let max = undefined

// проанализировать все найденные элементы
for (input of values) {
    // получить числовое значение поля input
    const value = parseInt(input.value) || undefined;
    
    if (value != undefined) {
        min = min == undefined ? value : min > value ? value : min;
        max = max == undefined ? value : max < value ? value : max;
    }
} 

console.log(min, max);

БЛОГ НА HUSL

Автоматический вывод суммы значений в input

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