如何從動態生成的列中獲取所有值的總和？

Question

所以我有這段代碼，我從 XML 文件中獲取值並動態創建一個顯示數據的表。 我遇到困難的地方是當我試圖從特定列中獲取總計然后將它們顯示在底部時。 例如;

第 3 列 3 5 6 總計 14

我實際上可以創建並 console.log 一個 listNode，但我不一定能對該列表做任何事情。 謝謝你的幫助。

這是 HTML 代碼：

   `<div id='employees-student'>
    <table id='record' cellpadding='10px' style="text-align:left;">
        <thead>
            <tr>
                <th>Week</th>
                <th>Date Range</th>
                <th>Appointments</th>
                <th>Tested Drive Through</th>
                <th>Positive Drive Through</th>
                <th>Positive Tested Offsite</th>
                <th>Cumulative Positive Rate</th>
                <th>Hospitalized Drive Through</th>
                <th>Hospitalized Tested Offsite</th>
            </tr>                
        </thead>
        <tbody>

        </tbody>
    </table>
</div><!--content ends-->
`

這是 JavaScript 代碼：

    <script>

window.onload = function () {

const recordsTableRows = function() {
let data = '';

let tableRecords = document.querySelector('#record');

let totals = document.querySelector('.totals');


fetch('DataDashboard.xml').then(function(resp) {
    return resp.text();
}).then(function(data) {


    let parser = new DOMParser(),
    xmlDoc = parser.parseFromString(data, 'text/xml');
    let records = xmlDoc.querySelectorAll('RECORD');
    let totals = xmlDoc.querySelectorAll('RECORD');
    let cumulative = 0;
    let positives = 0;
    let tested = 0;
    let posDrive = 0;
    let posTested = 0;
    let testDrive = 0;


    records.forEach(recordXmlNode => {


    let row = document.createElement('tr');

    //Week
    let td = document.createElement('td');
    td.innerText = recordXmlNode.children[9].innerHTML;
    row.appendChild(td);

    //Date Range
    td = document.createElement('td');
    td.innerText = recordXmlNode.children[0].innerHTML;
    row.appendChild(td);

    //Appointments
    td = document.createElement('td');
    td.innerText = recordXmlNode.children[1].innerHTML;
    row.appendChild(td);

    // const appointmentsArr = td.innerText;

    //Tested Drive Through  
    td = document.createElement('td');
    td.innerText = recordXmlNode.children[2].innerHTML;
    row.appendChild(td);

    testDrive += Number(recordXmlNode.children[2].innerHTML);


    //Positive Drive Through
    td = document.createElement('td');
    td.innerText = recordXmlNode.children[3].innerHTML;
    row.appendChild(td);

    posDrive += Number(recordXmlNode.children[3].innerHTML);


    //Positive Tested Offsite
    td = document.createElement('td');
    td.innerText = recordXmlNode.children[4].innerHTML;
    row.appendChild(td);

    posTested += Number(recordXmlNode.children[4].innerHTML);

    //Cumultive
    td = document.createElement('td');
    positives += Number(parseFloat(recordXmlNode.children[3].innerHTML) + parseFloat(recordXmlNode.children[4].innerHTML));
    tested += Number(parseFloat(recordXmlNode.children[2].innerHTML));
    cumulative = Math.floor((positives / tested) * 100) + "%";
    td.innerText = cumulative;
    row.appendChild(td);

    //Hospitalized Drive Through
    td = document.createElement('td');
    td.innerText = recordXmlNode.children[7].innerHTML;
    row.appendChild(td);

    //Hospitalized Tested Offsite
    td = document.createElement('td');
    td.innerText = recordXmlNode.children[8].innerHTML;
    row.appendChild(td);

    tableRecords.children[1].appendChild(row);

    //  console.log(posDrive);
    //  console.log(posTested);
    console.log(testDrive);

    });//records end
});//fetch end
};//recordsTableRows end


recordsTableRows();
</script>

這是一個 XML 示例：

    <?xml version="1.0" standalone="yes"?>
<RECORDS>
    <RECORD>
        <week>3/16-20</week>
        <appointments>6</appointments>
        <empStdsTested>2</empStdsTested>
        <empStdsPositive>0</empStdsPositive>
        <empStdsPosHospital>0</empStdsPosHospital>
        <patientsTested>4</patientsTested>
        <patientsPositive>0</patientsPositive>
        <empStdsPosOffsite>1</empStdsPosOffsite>
        <empStdsPosHospitalOffsite>0</empStdsPosHospitalOffsite>
        <weekNumber>1</weekNumber>
    </RECORD>
    <RECORD>
        <week>3/23-27</week>
        <appointments>9</appointments>
        <empStdsTested>5</empStdsTested>
        <empStdsPositive>1</empStdsPositive>
        <empStdsPosHospital>0</empStdsPosHospital>
        <patientsTested>4</patientsTested>
        <patientsPositive>1</patientsPositive>
        <empStdsPosOffsite>1</empStdsPosOffsite>
        <empStdsPosHospitalOffsite>1</empStdsPosHospitalOffsite>
        <weekNumber>2</weekNumber>
    </RECORD>
    <RECORD>
        <week>3/30-4/3</week>
        <appointments>4</appointments>
        <empStdsTested>3</empStdsTested>
        <empStdsPositive>1</empStdsPositive>
        <empStdsPosHospital>0</empStdsPosHospital>
        <patientsTested>1</patientsTested>
        <patientsPositive>1</patientsPositive>
        <empStdsPosOffsite>1</empStdsPosOffsite>
        <empStdsPosHospitalOffsite>0</empStdsPosHospitalOffsite>
        <weekNumber>3</weekNumber>
    </RECORD>
</RECORDS>

Answer 1

您已經在使用查詢選擇器，但並未發揮其全部潛力。 您可以使用它按名稱獲取子元素，這使您的代碼更具可讀性和可維護性。

如果您使用Àrray.from()將記錄轉換為數組，您可以訪問reduce()方法。 這允許您將 XML 個元素的列表縮減為特定的總數。

 const xmlString = getXMLString(); const dataDocument = (new DOMParser()).parseFromString(xmlString, 'text/xml'); // fetch records from XML and store them in an array const records = Array.from(dataDocument.querySelectorAll('RECORD')); // get the HTML elements and remove their contents const tableFootRow = document.querySelector('#record tfoot tr'); tableFootRow.textContent = ''; const tableBody = document.querySelector('#record tbody'); tableBody.textContent = ''; // iterate the records records.forEach( (record) => { // add a row const tr = tableBody.appendChild(document.createElement('tr')); // read data into variables const empStdsTested = +record.querySelector('empStdsTested')?.textContent || 0; const empStdsPositive = +record.querySelector('empStdsPositive')?.textContent || 0; const empStdsPosHospital = +record.querySelector('empStdsPosHospital')?.textContent || 0; const patientsTested = +record.querySelector('patientsTested')?.textContent || 0; const patientsPositive = +record.querySelector('patientsPositive')?.textContent || 0; const empStdsPosOffsite = +record.querySelector('empStdsPosOffsite')?.textContent || 0; const empStdsPosHospitalOffsite = +record.querySelector('empStdsPosHospitalOffsite')?.textContent || 0; tr // create and append table cell.appendChild(document.createElement('td')) // fetch and assign column specific value.textContent = record.querySelector('weekNumber')?.textContent || ''; tr.appendChild(document.createElement('td')).textContent = record.querySelector('week')?.textContent || ''; tr.appendChild(document.createElement('td')).textContent = record.querySelector('appointments')?.textContent || ''; tr.appendChild(document.createElement('td')).textContent = empStdsTested; tr.appendChild(document.createElement('td')).textContent = empStdsPositive; tr.appendChild(document.createElement('td')).textContent = empStdsPosHospital; tr.appendChild(document.createElement('td')).textContent = ((empStdsPositive + empStdsPosHospital) / empStdsTested * 100).toFixed(2) + '%'; tr.appendChild(document.createElement('td')).textContent = empStdsPosOffsite; tr.appendChild(document.createElement('td')).textContent = empStdsPosHospitalOffsite; } ); // add spacer cell for the first two columns tableFootRow.appendChild(document.createElement('td')).setAttribute('colspan', 2); // sum up appointments and add total tableFootRow.appendChild(document.createElement('td')).textContent = records.reduce( (carry, current) => carry + (+record.querySelector('appointments')?.textContent || 0), 0 ); // read totals into variables const totals = records.reduce( (carry, record) => ({ empStdsTested: carry.empStdsTested + (+record.querySelector('empStdsTested')?.textContent || 0), empStdsPositive: carry.empStdsPositive+ (+record.querySelector('empStdsPositive')?.textContent || 0), empStdsPosHospital: carry.empStdsPosHospital+ (+record.querySelector('empStdsPosHospital')?.textContent || 0), patientsTested: carry.patientsTested+ (+record.querySelector('patientsTested')?.textContent || 0), patientsPositive: carry.patientsPositive+ (+record.querySelector('patientsPositive')?.textContent || 0), empStdsPosOffsite: carry.empStdsPosOffsite+ (+record.querySelector('empStdsPosOffsite')?.textContent || 0), empStdsPosHospitalOffsite: carry.empStdsPosHospitalOffsite+ (+record.querySelector('empStdsPosHospitalOffsite')?.textContent || 0) }), { empStdsTested: 0, empStdsPositive: 0, empStdsPosHospital: 0, patientsTested: 0, patientsPositive: 0, empStdsPosOffsite: 0, empStdsPosHospitalOffsite: 0, } ); tableFootRow.appendChild(document.createElement('td')).textContent = totals.empStdsTested; tableFootRow.appendChild(document.createElement('td')).textContent = totals.empStdsPositive; tableFootRow.appendChild(document.createElement('td')).textContent = totals.empStdsPosHospital; tableFootRow.appendChild(document.createElement('td')).textContent = ((totals.empStdsPositive + totals.empStdsPosHospital) / totals.empStdsTested * 100).toFixed(2) + '%'; tableFootRow.appendChild(document.createElement('td')).textContent = totals.empStdsPosOffsite; tableFootRow.appendChild(document.createElement('td')).textContent = totals.empStdsPosHospitalOffsite; function getXMLString() { return `<?xml version="1.0" standalone="yes"?> <RECORDS> <RECORD> <week>3/16-20</week> <appointments>6</appointments> <empStdsTested>2</empStdsTested> <empStdsPositive>0</empStdsPositive> <empStdsPosHospital>0</empStdsPosHospital> <patientsTested>4</patientsTested> <patientsPositive>0</patientsPositive> <empStdsPosOffsite>1</empStdsPosOffsite> <empStdsPosHospitalOffsite>0</empStdsPosHospitalOffsite> <weekNumber>1</weekNumber> </RECORD> <RECORD> <week>3/23-27</week> <appointments>9</appointments> <empStdsTested>5</empStdsTested> <empStdsPositive>1</empStdsPositive> <empStdsPosHospital>0</empStdsPosHospital> <patientsTested>4</patientsTested> <patientsPositive>1</patientsPositive> <empStdsPosOffsite>1</empStdsPosOffsite> <empStdsPosHospitalOffsite>1</empStdsPosHospitalOffsite> <weekNumber>2</weekNumber> </RECORD> <RECORD> <week>3/30-4/3</week> <appointments>4</appointments> <empStdsTested>3</empStdsTested> <empStdsPositive>1</empStdsPositive> <empStdsPosHospital>0</empStdsPosHospital> <patientsTested>1</patientsTested> <patientsPositive>1</patientsPositive> <empStdsPosOffsite>1</empStdsPosOffsite> <empStdsPosHospitalOffsite>0</empStdsPosHospitalOffsite> <weekNumber>3</weekNumber> </RECORD> </RECORDS>`; }

 table { border-collapse: collapse; } th, td { border: 1px solid silver; padding: 4px; }

 <table id="record"> <thead> <tr> <th>Week</th> <th>Date Range</th> <th>Appointments</th> <th>Tested Drive Through</th> <th>Positive Drive Through</th> <th>Positive Tested Offsite</th> <th>Cumulative Positive Rate</th> <th>Hospitalized Drive Through</th> <th>Hospitalized Tested Offsite</th> </tr> </thead> <tbody> </tbody> <tfoot> <tr> </tr> </tfoot> </table>