To add column with title "total" by javascript

Question

I am trying to add a column by using for-loop. I do not get any error but nothing happened. Can someone help with this? Thanks in advance.

 function add(){
    //att läsa hela tabell
    var tabell = document.getElementById("c");
    //att läsa taggan tr
    var rader = tabell.getElementsByTagName("tr");

    //att läsa alla rader i tabellen
    for(var i = 0; i < rader.length; i++){
        //medan alla rader läsas upp skapar td element
        var nyCell = document.createElement("td");
        //indikerar nyCell i alla rader
        rader[i].appendChild(nyCell);

        var nyRad = document.createElement("tr");
    }
}

Answer 1

Your code works given a table like below

NOTE: I CALL the function add() at some stage. It has to be after the table exists.

function add() {
  //att läsa hela tabell
  var tabell = document.getElementById("c");
  //att läsa taggan tr
  var rader = tabell.getElementsByTagName("tr");

  //att läsa alla rader i tabellen
  for (var i = 0; i < rader.length; i++) {
    //medan alla rader läsas upp skapar td element
    var nyCell = document.createElement("td");
    //indikerar nyCell i alla rader
    nyCell.innerHTML = "Hejsan";
    rader[i].appendChild(nyCell);
  }
}
add()

td {
  border: 1px solid black
}

<table id="c">
  <tr></tr>
</table>

I believe you actually mean this

function add() {
  /*att skapa th som står summa*/
  var tableHeadRow = document.querySelector("#c thead tr"); //ONE row

    var nyTh = document.createElement("th");
    nyTh.innerHTML = "Summa";
    tableHeadRow.appendChild(nyTh);

  var tableBody = document.querySelector("#c tbody");
  var tableBodyRows = tableBody.querySelectorAll("tr"); // ALL rows
  //att läsa alla rader i tabellen
  for (var i = 0; i < tableBodyRows.length; i++) {
    //medan alla rader läsas upp skapar td element
    var nyCell = document.createElement("td");
    //indikerar nyCell i alla rader
    nyCell.innerHTML = "";
    tableBodyRows[i].appendChild(nyCell); // add ONE cell to the end of each row
  }

  /*to add new row*/
  var nyRad = document.createElement("tr");
  var nyCell1 = document.createElement("td");
  var nyCell2 = document.createElement("td");
  var nyCell3 = document.createElement("td");
  var nyCell4 = document.createElement("td");
  nyCell4.innerText="Total";
  nyRad.appendChild(nyCell1);
  nyRad.appendChild(nyCell2);
  nyRad.appendChild(nyCell3);
  nyRad.appendChild(nyCell4);
  tableBody.appendChild(nyRad);
}
add()

    td {
      border: 1px solid black
    }

<table id="c">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1 Cell 1</td>
      <td>Row 1 Cell 2</td>
      <td>Row 1 Cell 3</td>
    </tr>
    <tr>
      <td>Row 2 Cell 1</td>
      <td>Row 2 Cell 2</td>
      <td>Row 2 Cell 3</td>
    </tr>
  </tbody>
</table>