Javascript DOM <Table> Access Numbers in table

Description

Javascript DOM <Table> Access Numbers in table

View in separate window 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Accessing numbers in table</title>
<script type="text/javascript">
  window.onload = function() {/*from  w ww.ja  v a  2s  . co m*/
    let sum = 0;

    let dataTable = document.getElementById("table1");

    // use querySelector to find all second table cells
    let cells = document.querySelectorAll("td + td");

    for (let i = 0; i < cells.length; i++)
      sum += parseFloat(cells[i].firstChild.data);

    // now add sum to end of table
    let newRow = document.createElement("tr");

    // first cell
    let firstCell = document.createElement("td");
    let firstCellText = document.createTextNode("Sum:");
    firstCell.appendChild(firstCellText);
    newRow.appendChild(firstCell);

    // second cell with sum
    let secondCell = document.createElement("td");
    let secondCellText = document.createTextNode(sum);
    secondCell.appendChild(secondCellText);
    newRow.appendChild(secondCell);

    // add row to table
    dataTable.appendChild(newRow);

  }
</script>
</head>
<body>
  <table id="table1">
    <tr>
      <td>Washington</td>
      <td>145</td>
    </tr>
    <tr>
      <td>Oregon</td>
      <td>233</td>
    </tr>
    <tr>
      <td>Missouri</td>
      <td>833</td>
    </tr>
  </table>
</body>
</html>



PreviousNext

Related