получить сумму последнего столбца таблицы
Подскажите как мне получить сумму последнего столбца таблицы. Мне нужна ИТОГ последнего столбика. С учетом что строки 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> .... и т.д. |
const tabl = document.querySelector('table') let sum = [].reduce.call (tabl.tBodies[0].rows, (a, row) => a += parseFloat (row.cells[2].textContent), 0) |
сумма ячеек таблицы
:write:
<!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> |
Цитата:
|
Юсуф,
можно только гадать, что у вас в ячейках на самом деле. |
Юсуф,
здесь код работает, пост #3? |
Цитата:
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 id="SmetaTableItog"><input type="number" name="Itog[]" id="Itog'+NumPodstr+'" value="" /></td> |
Цитата:
|
Юсуф,
... изменить значение в предпоследних ячейках, чтобы увидеть результат <!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> |
Часовой пояс GMT +3, время: 14:23. |