Форум

Юсуф · #1 (**permalink**) 27.04.2020, 19:07

Подскажите как мне получить сумму последнего столбца таблицы. Мне нужна ИТОГ последнего столбика. С учетом что строки tr создаются динамически.

<tr><td id="ob1">2</td><td id="cena1">2</td><td id="summa1">4</td></tr>
<tr><td id="ob2">1.1</td><td id="cena2">0.2</td><td id="summa2">0.22</td></tr>
<tr><td id="ob3">2</td><td id="cena3">3</td><td id="summa3">6</td></tr>
<tr><td id="ob4">2</td><td id="cena4">5</td><td id="summa4">10</td></tr>
<tr><td id="ob5">2</td><td id="cena5">2</td><td id="summa5">4</td></tr>
<tr><td id="ob6">1</td><td id="cena6">1</td><td id="summa6">1</td></tr>
.... и т.д.

voraa · #2 (**permalink**) 27.04.2020, 19:27

const tabl = document.querySelector('table')
let sum = [].reduce.call (tabl.tBodies[0].rows, (a, row) => a += parseFloat (row.cells[2].textContent), 0)

рони · #3 (**permalink**) 27.04.2020, 20:52

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
<style type="text/css">
tr td:last-child, #out{
    border: 1px solid #0000FF;
}

</style>
</head>
<body>
<table><tr><td id="ob1">2</td><td id="cena1">2</td><td id="summa1">4</td></tr>
<tr><td id="ob2">1.1</td><td id="cena2">0.2</td><td id="summa2">0.22</td></tr>
<tr><td id="ob3">2</td><td id="cena3">3</td><td id="summa3">6</td></tr>
<tr><td id="ob4">2</td><td id="cena4">5</td><td id="summa4">10</td></tr>
<tr><td id="ob5">2</td><td id="cena5">2</td><td id="summa5">4</td></tr>
<tr><td id="ob6">1</td><td id="cena6">1</td><td id="summa6">1</td></tr>
</table>
<output id="out"></output>
<script>
const tds = document.querySelectorAll('table tbody tr td:last-child');
let sum = 0;
for(const {textContent} of tds) sum += Number(textContent);
out.textContent = sum;
</script>
</body>
</html>

Юсуф · #4 (**permalink**) 27.04.2020, 21:48

Сообщение от рони

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
<style type="text/css">
tr td:last-child, #out{
    border: 1px solid #0000FF;
}

</style>
</head>
<body>
<table><tr><td id="ob1">2</td><td id="cena1">2</td><td id="summa1">4</td></tr>
<tr><td id="ob2">1.1</td><td id="cena2">0.2</td><td id="summa2">0.22</td></tr>
<tr><td id="ob3">2</td><td id="cena3">3</td><td id="summa3">6</td></tr>
<tr><td id="ob4">2</td><td id="cena4">5</td><td id="summa4">10</td></tr>
<tr><td id="ob5">2</td><td id="cena5">2</td><td id="summa5">4</td></tr>
<tr><td id="ob6">1</td><td id="cena6">1</td><td id="summa6">1</td></tr>
</table>
<output id="out"></output>
<script>
const tds = document.querySelectorAll('table tbody tr td:last-child');
let sum = 0;
for(const {textContent} of tds) sum += Number(textContent);
out.textContent = sum;
</script>
</body>
</html>

не знаю почему, но выводит в результат NaN

рони · #5 (**permalink**) 27.04.2020, 21:51

Юсуф,
можно только гадать, что у вас в ячейках на самом деле.

рони · #6 (**permalink**) 27.04.2020, 21:54

Юсуф,
здесь код работает, пост #3?

Юсуф · #7 (**permalink**) 27.04.2020, 21:54

Сообщение от рони

Юсуф,
можно только гадать, что у вас в ячейках на самом деле.

ВОТ динамически создаваемая строка)) не хотел такой код скидывать большой)

theads.append('<tr id="rrr"><td id="SmetaTableNum" class=""></td>'+
                    '<td id="SmetaTableName"><input type="text"  name="referal[]" id="referal'+NumPodstr+'" value="" class="who"  autocomplete="off" />'+
                    '<div id="search_result" class="search_result'+NumPodstr+'"></div></td>'+
                    '<td id="SmetaTableEd"><select name="Ed[]"><option value="шт.">шт.</option><option value="м²">м²</option><option value="м³">м³</option><option value="упак.">упак.</option>'+
                    '<option value="метр">метр</option><option value="м.п.">м.п.</option><option value="комп.">комп.</option><option value="смена">смена</option></select></td>'+
                    '<td id="SmetaTableObem"><input type="number" name="Obem[]" id="Obem'+NumPodstr+'" type="text" value="" /></td>'+
                    '<td id="SmetaTableMat"><input  type="number" name="Material[]" id="Material'+NumPodstr+'" value="" /></td>'+
                    '<td id="SmetaTableSMR"><input  type="number" name="SMR[]" id="SMR'+NumPodstr+'" /></td>'+
                    '<td id="SmetaTableItog"><input type="number" name="Itog[]" id="Itog'+NumPodstr+'" value="" /></td>'+
                    '<td id="Minus"><button type="button" id="StrocaMinus">-</button></td></tr>');

Юсуф · #8 (**permalink**) 27.04.2020, 21:56

Сообщение от Юсуф

ВОТ динамически создаваемая строка)) не хотел такой код скидывать большой)

theads.append('<tr id="rrr"><td id="SmetaTableNum" class=""></td>'+
                    '<td id="SmetaTableName"><input type="text"  name="referal[]" id="referal'+NumPodstr+'" value="" class="who"  autocomplete="off" />'+
                    '<div id="search_result" class="search_result'+NumPodstr+'"></div></td>'+
                    '<td id="SmetaTableEd"><select name="Ed[]"><option value="шт.">шт.</option><option value="м²">м²</option><option value="м³">м³</option><option value="упак.">упак.</option>'+
                    '<option value="метр">метр</option><option value="м.п.">м.п.</option><option value="комп.">комп.</option><option value="смена">смена</option></select></td>'+
                    '<td id="SmetaTableObem"><input type="number" name="Obem[]" id="Obem'+NumPodstr+'" type="text" value="" /></td>'+
                    '<td id="SmetaTableMat"><input  type="number" name="Material[]" id="Material'+NumPodstr+'" value="" /></td>'+
                    '<td id="SmetaTableSMR"><input  type="number" name="SMR[]" id="SMR'+NumPodstr+'" /></td>'+
                    '<td id="SmetaTableItog"><input type="number" name="Itog[]" id="Itog'+NumPodstr+'" value="" /></td>'+
                    '<td id="Minus"><button type="button" id="StrocaMinus">-</button></td></tr>');

в эту td input заноcиться сумма строки, и нужно сумма всех этих строк

<td id="SmetaTableItog"><input type="number" name="Itog[]" id="Itog'+NumPodstr+'" value="" /></td>

Юсуф · #9 (**permalink**) 27.04.2020, 22:02

Сообщение от рони

Юсуф,
здесь код работает, пост #3?

вроде как бы да

рони · #10 (**permalink**) 27.04.2020, 22:08

Юсуф,
... изменить значение в предпоследних ячейках, чтобы увидеть результат

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
<style type="text/css">
tr td:nth-last-child(2), #out{
    border: 3px solid #0000FF;
}

</style>
</head>
<body>
<table><tbody>
</tbody></table>
<output id="out"></output>
<script>
const tbody = document.querySelector('table tbody');
let html = "";
for (let NumPodstr = 0; NumPodstr < 3; NumPodstr++) {
html +='<tr id="rrr"><td id="SmetaTableNum" class=""></td>'+
                    '<td id="SmetaTableName"><input type="text"  name="referal[]" id="referal'+NumPodstr+'" value="" class="who"  autocomplete="off" />'+
                    '<div id="search_result" class="search_result'+NumPodstr+'"></div></td>'+
                    '<td id="SmetaTableEd"><select name="Ed[]"><option value="шт.">шт.</option><option value="м²">м²</option><option value="м³">м³</option><option value="упак.">упак.</option>'+
                    '<option value="метр">метр</option><option value="м.п.">м.п.</option><option value="комп.">комп.</option><option value="смена">смена</option></select></td>'+
                    '<td id="SmetaTableObem"><input type="number" name="Obem[]" id="Obem'+NumPodstr+'" type="text" value="" /></td>'+
                    '<td id="SmetaTableMat"><input  type="number" name="Material[]" id="Material'+NumPodstr+'" value="" /></td>'+
                    '<td id="SmetaTableSMR"><input  type="number" name="SMR[]" id="SMR'+NumPodstr+'" /></td>'+
                    '<td id="SmetaTableItog"><input type="number" name="Itog[]" id="Itog'+NumPodstr+'" value="" /></td>'+
                    '<td id="Minus"><button type="button" id="StrocaMinus">-</button></td></tr>';
}
tbody.innerHTML = html;
tbody.addEventListener( "input" , function(event) {
event.preventDefault();
const itog = document.querySelectorAll('table tbody tr [name="Itog[]"]');
let sum = 0;
for(const {value} of itog) sum += Number(value);
out.textContent = sum;

});

</script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript