Моя таблица JQuery суммирует только первую строку таблицы.Jquery

Программирование на jquery
Ответить
Anonymous
 Моя таблица JQuery суммирует только первую строку таблицы.

Сообщение Anonymous »

У меня есть таблица, в которой я хочу суммировать значения в ячейках каждой строки для каждого продукта и дня. Дело в том, что это работает, но только в первой строке, а остальные значения получают 0. i думаете, это может быть связано с тем, что каждый продукт можно расширить, а значения слева от созданной мной таблицы, возможно, еще не установлены? потому что всегда отображаются расчеты первой строки, а затем пользователь должен развернуть каждый продукт, чтобы увидеть остальные данные. Это старая система, написанная на Jquery. Мой код выглядит так:

Код: Выделить всё

function calculateAndDisplayTotals() {

createSummaTotalTableHead();
createSummaTotalTableBody();
}

function createSummaTotalTableHead() {
const rowElements = document.querySelectorAll('#tblResult > thead > tr');

const sectionHeader = rowElements[0];
const columnsHeaderElement = document.createElement('th');
columnsHeaderElement.innerHTML = 'Summa totalt';
columnsHeaderElement.classList.add('fatborder');
columnsHeaderElement.setAttribute('colspan', '7');
sectionHeader.appendChild(columnsHeaderElement);

const columnHeaders = rowElements[1];
const headerCol1 = document.createElement('th');
const headerCol2 = document.createElement('th');
const headerCol3 = document.createElement('th');
const headerCol4 = document.createElement('th');
const headerCol5 = document.createElement('th');
const headerCol6 = document.createElement('th');
const headerCol7 = document.createElement('th');
headerCol1.innerHTML = 'Tillgängligt';
headerCol2.innerHTML = 'Beställt To';
headerCol3.innerHTML = 'Utfall TO';
headerCol4.innerHTML = 'Antal per GE';
headerCol5.innerHTML = 'Detalj TO';
headerCol6.innerHTML = 'Antal utfall TO';
headerCol7.innerHTML = 'Diff';
columnHeaders.appendChild(headerCol1);
columnHeaders.appendChild(headerCol2);
columnHeaders.appendChild(headerCol3);
columnHeaders.appendChild(headerCol4);
columnHeaders.appendChild(headerCol5);
columnHeaders.appendChild(headerCol6);
columnHeaders.appendChild(headerCol7);
}

function createSummaTotalTableBody() {

const rows = document.querySelectorAll('#tblResult > tbody > tr')

for (let i = 0; i < rows.length; i++) {
const row = rows[i];
const tillgangligtCol = row.querySelectorAll('.tillgangligtCol');
const bestalltToCol = row.querySelectorAll('.bestalltToCol');
const utafallToCol = row.querySelectorAll('.utafallToCol');
const antalPerGeCol = row.querySelectorAll('.antalPerGeCol');
const antalDetaljToCol = row.querySelectorAll('.antalDetaljTo');
const antalUtfallToCol = row.querySelectorAll('.antalUtfallToCol');

const sumTillgangligt = Array.from(tillgangligtCol).map(i => parseInt(i.innerHTML)).reduce((partialSum, a) => partialSum + (isNaN(a) ? 0 : a), 0);
const sumBestalltTo = Array.from(bestalltToCol).map(i => parseInt(i.innerHTML)).reduce((partialSum, a) => partialSum + (isNaN(a) ? 0 : a), 0);
const sumUtafallTo = Array.from(utafallToCol).map(i => parseInt(i.innerHTML)).reduce((partialSum, a) => partialSum + (isNaN(a) ? 0 : a), 0);
const sumAntalPerGe = Array.from(antalPerGeCol).map(i => parseInt(i.innerHTML)).reduce((partialSum, a) => partialSum + (isNaN(a) ? 0 : a), 0);
const sumAntalDetaljTo = Array.from(antalDetaljToCol).map(i => parseInt(i.innerHTML)).reduce((partialSum, a) => partialSum + (isNaN(a) ? 0 : a), 0);
const sumAntalUtfallToCol = Array.from(antalUtfallToCol).map(i => parseInt(i.innerHTML)).reduce((partialSum, a) =>  partialSum + (isNaN(a) ? 0 : a), 0);

const tillgangligtColumn = document.createElement('td');
const bestalltToColumn = document.createElement('td');
const utfallTOColumn = document.createElement('td');
const antalPerGEColumn = document.createElement('td');
const detaljToColumn = document.createElement('td');
const antalUtfallTOColumn = document.createElement('td');
const diffColumn = document.createElement('td');

tillgangligtColumn.innerHTML = sumTillgangligt;
bestalltToColumn.innerHTML = sumBestalltTo;
utfallTOColumn.innerHTML = sumUtafallTo;
antalPerGEColumn.innerHTML = sumAntalPerGe;
detaljToColumn.innerHTML = sumAntalDetaljTo;
antalUtfallTOColumn.innerHTML = sumAntalUtfallToCol;
diffColumn.innerHTML = 0;

row.appendChild(tillgangligtColumn);
row.appendChild(bestalltToColumn);
row.appendChild(utfallTOColumn);
row.appendChild(antalPerGEColumn);
row.appendChild(detaljToColumn);
row.appendChild(antalUtfallTOColumn);
row.appendChild(diffColumn);

}
}
Я вызываю код CalculateAndDisplayTotals() в конце вычислений, и я знаю, что он работает правильно, потому что он правильно вычисляет строки слева, но обратите внимание на строки, которые должны быть расширены, все они равны 0.
Я безуспешно пытался вызвать метод CalculatedAndDisplayTotals() в разных местах, и я думаю, что мне нужно как-то вызвать этот метод, когда я расширяю строки showehow ? как и сейчас, те строки, которые расширяются после создания таблицы, равны 0 в каждой строке.
вот как это выглядит при загрузке
Изображение

и вот как это выглядит в развернутом виде:
Изображение


Подробнее здесь: https://stackoverflow.com/questions/783 ... -the-table
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Jquery»