|
27.04.2020, 19:07
|
Аспирант
|
|
Регистрация: 09.03.2012
Сообщений: 84
|
|
получить сумму последнего столбца таблицы
Подскажите как мне получить сумму последнего столбца таблицы. Мне нужна ИТОГ последнего столбика. С учетом что строки 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>
.... и т.д.
|
|
27.04.2020, 19:27
|
|
Профессор
|
|
Регистрация: 03.02.2020
Сообщений: 2,745
|
|
const tabl = document.querySelector('table')
let sum = [].reduce.call (tabl.tBodies[0].rows, (a, row) => a += parseFloat (row.cells[2].textContent), 0)
Последний раз редактировалось voraa, 27.04.2020 в 19:32.
|
|
27.04.2020, 20:52
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
сумма ячеек таблицы
<!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>
|
|
27.04.2020, 21:48
|
Аспирант
|
|
Регистрация: 09.03.2012
Сообщений: 84
|
|
Сообщение от рони
|
<!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
|
|
27.04.2020, 21:51
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
Юсуф,
можно только гадать, что у вас в ячейках на самом деле.
|
|
27.04.2020, 21:54
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
Юсуф,
здесь код работает, пост #3?
|
|
27.04.2020, 21:54
|
Аспирант
|
|
Регистрация: 09.03.2012
Сообщений: 84
|
|
Сообщение от рони
|
Юсуф,
можно только гадать, что у вас в ячейках на самом деле.
|
ВОТ динамически создаваемая строка)) не хотел такой код скидывать большой)
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>');
|
|
27.04.2020, 21:56
|
Аспирант
|
|
Регистрация: 09.03.2012
Сообщений: 84
|
|
Сообщение от Юсуф
|
ВОТ динамически создаваемая строка)) не хотел такой код скидывать большой)
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>
|
|
27.04.2020, 22:02
|
Аспирант
|
|
Регистрация: 09.03.2012
Сообщений: 84
|
|
Сообщение от рони
|
Юсуф,
здесь код работает, пост #3?
|
вроде как бы да
|
|
27.04.2020, 22:08
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
Юсуф,
... изменить значение в предпоследних ячейках, чтобы увидеть результат
<!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>
|
|
|
|