Код: Выделить всё
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);
}
}
Я безуспешно пытался вызвать метод CalculatedAndDisplayTotals() в разных местах, и я думаю, что мне нужно как-то вызвать этот метод, когда я расширяю строки showehow ? как и сейчас, те строки, которые расширяются после создания таблицы, равны 0 в каждой строке.
вот как это выглядит при загрузке

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

Подробнее здесь: https://stackoverflow.com/questions/783 ... -the-table
Мобильная версия