How can I add <td> tags to my html table with JavaScript?

Question

I'm trying to use the insertcell method to add a column to my table but either I'm getting the syntax wrong or it isn't working. I wondered if anyone could explain where I am going wrong?

The table body in the html is populated dynamically with some other JavaScript but I don't think this is the problem as I've tested grabbing some content from that table with an alert box and it works (commented out below):

<!DOCTYPE html>
<script type="text/javascript" src="fullstationxyparser.js">
</script>
<html>
<body>
    <table border=1>
        <thead>
            <tr>
                <td>Element Name</td>
                <td>x</td>
                <td>y</td>
                <td>testCol</td>
            </tr>
        </thead>
        <tbody id="stationlist">
        </tbody>
    </table>
</body>
</html>

function addStationNames() {
    var myTable = document.getElementById("stationlist");
    var stationListRows = myTable.getElementsByTagName('tr');

    for (var i = 1; i < stationListRows.length; i++) {
        var cell = stationListRows[i].getElementsByTagName('td');
        var stationName = cell[0].innerHTML; //get station id from element Name column
        var currentRow = stationListRows[i];
        var newCol = currentRow.insertcell(-1);
        newCol.innerHTML = stationName;
        //alert(stationName);
    }
}

In Firefox developer tools, I get TypeError: "currentRow.insertcell is not a function". Perhaps I can't use the insertcell method on a row collection?

Dacre Denny · Accepted Answer · 2019-06-10 22:16:52Z

4

In general you can call the insertRow() method on a Table DOM element, followed by calls to the insertCell() method as shown below to dynamically add <td> tags to your table with JavaScript.

Be careful to call insertCell() (with capital C) rather than insertcell() as you are currently doing:

const table = document.querySelector('table');

/* Insert new row */
const row = table.insertRow();

/* Insert cells (td) for row */
const td0 = row.insertCell(0);
const td1 = row.insertCell(1);
const td2 = row.insertCell(2);
const td3 = row.insertCell(3);

/* Populate cells with data */
td0.innerText = 'Foo';
td1.innerText = '3';
td2.innerText = '6';
td3.innerText = 'success';

<table border="1">
  <thead>
    <tr>
      <td>Element Name</td>
      <td>x</td>
      <td>y</td>
      <td>testCol</td>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Specific to your code, some other changes to consider might be as listed in this code snippet:

function addStationNames() {

  /* Condense table row access into single query */
  const stationRows = document.querySelectorAll("#stationlist tr");
  
  stationRows.forEach((stationRow, i) => {
    
    /* Skip first row */
    if(i === 0) { return; }
    
    /* Get station name from text of first cell */
    const stationName = stationRow.querySelector('td:first-child').innerText;
    
    /* Insert last cell on row and assign station name */
    stationRow.insertCell(-1).innerText = stationName;
  });
  
  /*
  Old code:
  for (let i = 1; i < stationListRows.length; i++) {    
    var cell = stationListRows[i].getElementsByTagName('td');
    var stationName = cell[0].innerHTML; 
    var currentRow = stationListRows[i];
    var newCol = currentRow.insertcell(-1);
    newCol.innerHTML = stationName;
  }
  */
}

addStationNames();

<!-- set table id to stationlist -->
<table border="1" id="stationlist">
  <thead>
    <tr>
      <td>Element Name</td>
      <td>x</td>
      <td>y</td>
      <td>testCol</td>
    </tr>
    <tr>
      <td>90's pop</td>
      <td>232</td>
      <td>543</td> 
    </tr>
  </thead>
  <tbody>
    <!-- Remove id from tbody -->
  </tbody>
</table>

edited Jun 10, 2019 at 22:16

answered Jun 10, 2019 at 21:50

Dacre Denny

30.4k5 gold badges53 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

deethreenovice Over a year ago

duh thanks - literally the wrong case. I'd got it into my head that JavaScript wasn't case sensitive..

Dacre Denny Over a year ago

No worries! I'm just adding a few other helpers to the answer :)

Dacre Denny Over a year ago

@deethreenovice you're welcome - just dropped a few suggested changes at the end on my answer. Hope those are of some use! let me know if you need any further pointers :-)

Dacre Denny Over a year ago

you're welcome - that's just vanilla javascript. You should find it's compatible with most browsers these days

Dacre Denny Over a year ago

Let us continue this discussion in chat.

|

TKoL · Accepted Answer · 2019-06-10 21:56:34Z

1

An alternative to the answer above (which is totally fine) is this method, which is also a more general method of creating any html element:

const table = document.getElementById('one');
const newRow = document.createElement("tr");
let newCell = document.createElement("td");
newCell.textContent = "first cell";
let newCell2 = document.createElement("td");
newCell2.textContent = "second cell";
newRow.appendChild(newCell);
newRow.appendChild(newCell2);
table.appendChild(newRow);

https://jsfiddle.net/zgaosdbv/

answered Jun 10, 2019 at 21:56

TKoL

13.9k4 gold badges49 silver badges86 bronze badges

Collectives™ on Stack Overflow

How can I add <td> tags to my html table with JavaScript?

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related