Добавить столбец с заголовком «всего» по JavaScript - PullRequest
Новая
       10

Добавить столбец с заголовком «всего» по JavaScript

0 голосов
/ 07 декабря 2018

Я пытаюсь добавить столбец с помощью цикла for.Я не получаю никакой ошибки, но ничего не произошло.Может ли кто-нибудь помочь с этим?Заранее спасибо.

 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");
    }
}

1 Ответ

0 голосов
/ 07 декабря 2018

Ваш код работает с таблицей, подобной приведенной ниже

ПРИМЕЧАНИЕ: Я ВЫЗЫВАЮ функцию add() на каком-то этапе.Это должно быть после того, как таблица существует. 

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>

Полагаю, вы на самом деле имеете в виду это 

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>
...