Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.04.2020, 20: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>
.... и т.д.
Ответить с цитированием
  #2 (permalink)  
Старый 27.04.2020, 20:27
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 888

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 в 20:32.
Ответить с цитированием
  #3 (permalink)  
Старый 27.04.2020, 21:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,619

сумма ячеек таблицы

<!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, 22: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
Ответить с цитированием
  #5 (permalink)  
Старый 27.04.2020, 22:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,619

Юсуф,
можно только гадать, что у вас в ячейках на самом деле.
Ответить с цитированием
  #6 (permalink)  
Старый 27.04.2020, 22:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,619

Юсуф,
здесь код работает, пост #3?
Ответить с цитированием
  #7 (permalink)  
Старый 27.04.2020, 22: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>');
Ответить с цитированием
  #8 (permalink)  
Старый 27.04.2020, 22: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>
Ответить с цитированием
  #9 (permalink)  
Старый 27.04.2020, 23:02
Аспирант
Отправить личное сообщение для Юсуф Посмотреть профиль Найти все сообщения от Юсуф
 
Регистрация: 09.03.2012
Сообщений: 84

Сообщение от рони Посмотреть сообщение
Юсуф,
здесь код работает, пост #3?
вроде как бы да
Ответить с цитированием
  #10 (permalink)  
Старый 27.04.2020, 23:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,619

Юсуф,
... изменить значение в предпоследних ячейках, чтобы увидеть результат
<!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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
посчитать сумму в каждом столбце динамической таблицы Tasha12 jQuery 1 16.04.2017 20:59
Получить значения строки и столбца таблицы по нажатию polin11 Events/DOM/Window 11 30.09.2016 15:38
Не удается получить значение элемента таблицы при клике на соседнюю ячейку yakim Элементы интерфейса 5 07.04.2016 15:06
Как получить <thead> таблицы Dencho Общие вопросы Javascript 3 10.12.2015 17:21
Получить все элементы строки таблицы по нажатию на кнопку ansi_str Events/DOM/Window 2 01.03.2012 15:58