how to replace content in of <tr> in a <tfoot>

Question

i have a table that was created by Wijmo I want to change the content of it's footer

myfooter

<tfoot>
    <tr role="row" class="wijmo-wijgrid-footerrow ui-state-default ui-state-highlight">
    <td class="wijgridtd" role="columnfooter" scope="col" >
    <div class="wijmo-wijgrid-innercell "> </div></td>

    <td class="wijgridtd" role="columnfooter" scope="col" >
    <div class="wijmo-wijgrid-innercell "> </div></td>

    <td class="wijgridtd" role="columnfooter" scope="col" >
    <div class="wijmo-wijgrid-innercell ">**TW: 12,100** </div> </td>
    <tr>
</tfoot>

I want to change the TW:12,000 to a different content

Answer 1

You can get a reference to the table row using document.querySelector, assuming the element's attributes have unique values to select it by (otherwise use querySelectorAll and an index).

var row = document.querySelector('.wijmo-wijgrid-footerrow');

You can then use the row's cells collection to get the cells, and use cells.length to find the last cell.

var cells = row.cells;
var cell = cells[cells.length - 1];

Now you can use innerHTML or some other method to replace the content of the cell.

cell.innerHTML = "some new content";

You can also skip those intermediate variables if you want.

var cells = document.querySelector('.wijmo-wijgrid-footerrow').cells;
cells[cells.length - 1].innerHTML = "some new content";

See the section on tabular data in the HTML Living Standard for more information on manipulating tables.