Question

I have this code:

/* Modify the footer row to match what we want */
var nCells = nRow.getElementsByTagName('th');
nCells[1].innerHTML = iPageCPSV;
nCells[2].innerHTML = iPageCGV;
nCells[3].innerHTML = iPagePPSV;
nCells[4].innerHTML = iPagePGV;

It works just fine as it is. However I have added another <tr> into the section now. And I am having trouble figureing out how to populate the <th> in the second <tr>

<tfoot>
    <tr style="background-color: #DDDDDD;">
        <th align="right" colspan="6">
            Page Total:
        </th>
        <th align="left"></th>
        <th align="left"></th>
        <th align="left"></th>
        <th align="left"></th>
    </tr>
    <tr style="background-color: #DDDDDD;">
        <th align="right" colspan="6">
            Downline Total:
        </th>
        <th align="left"></th>
        <th align="left"></th>
        <th align="left"></th>
        <th align="left"></th>
    </tr>
</tfoot>

Before I added the second <tr> with more <th> everything worked. It still works, I just don’t know how to populate the data into the second row. Can anyone help me modify the existing JavaScript or tell me how to duplicate it into jQuery?

Answer 1

Without jQuery…

var foot = nRow.getElementsByTagName('tfoot')[0];
foot.rows[0].cells[1].innerHTML = iPageCPSV;
foot.rows[0].cells[2].innerHTML = iPageCGV;
foot.rows[0].cells[3].innerHTML = iPagePPSV;
foot.rows[0].cells[4].innerHTML = iPagePGV;

foot.rows[1].cells[1].innerHTML = iPageCPSV;
foot.rows[1].cells[2].innerHTML = iPageCGV;
foot.rows[1].cells[3].innerHTML = iPagePPSV;
foot.rows[1].cells[4].innerHTML = iPagePGV;

Or with…

var foot = $('tfoot').first();

foot.children().each(function(i, row) {

    row.cells[1].innerHTML = iPageCPSV;
    row.cells[2].innerHTML = iPageCGV;
    row.cells[3].innerHTML = iPagePPSV;
    row.cells[4].innerHTML = iPagePGV;
});

A more modern solution…

var rows = nRow.getElementsByTagName('tfoot')[0].rows,
    data = [iPageCPSV, iPageCGV, iPagePPSV, iPagePGV];

[].forEach.call(rows, function(el, i) {
    data.forEach(function(item, ii) {
        el.cells[ii + 1].innerHTML = item;
    });
});

---

Since you need different data for each cell, I’d suggest putting it all in an Array, getting a collection of all the elements, and pairing the two…

var data = [iPageCPSV, iPageCGV, iPagePPSV, iPagePGV, 'foo', 'bar', 'baz', 'buz'];

$('tfoot > tr > th:not(:first-child)').html(function(i, el) {
    return data[i];
});