How to use javascript to insert tags in tables

I’m trying to find a way to insert html element tags into a table structure. There are often multiple tables in an html page so I dynamically create and insert an ID for each table which works fine. However, when I try to insert specific html elements into the different portions of the table I get nothing but errors or the table never gets updated.

I’m a technical writer experimenting with javascript and the authoring tool I use doesn’t allow for thead and tbody tags, so when I come across a table in an html page in my document that doesn’t have this structure, I need to add it. Afterwards, I dynamically implement visual elements into the table to make it easier to find information.

This all works fine on tables that already have the thead structure so I need a way to get this structure into tables that don’t have it.

Here’s a before and after view of what I’m trying to do:

Before:

    <table class="TableHeadingOnTop" style="border-collapse: separate" 
                                             cellspacing="0" border="1">
        <tr class="t1Row">
            <td class="t1Col"><p class="MoreList"><a 
             href="DefaultProbeComponents.htm">DefaultProbeComponents</a></p></td>
            <td class="t2Col"><p class="MoreList"><a href="ProbeQualVisionOpticsCalFocusLatencyDuration1.htm">ProbeQualVisionOpticsCalFocusLatencyDuration1</a></p></td>
            <td class="last"><p class="MoreList"><a 
            href="VFTScan_LSPX1C_Speed1.htm">VFTScan_LSPX1C_Speed1</a></p></td>
        </tr>
        <tr class="t2Row">
            td class="t1Col"><p class="MoreList"><a href="DefMode.htm">DefMode</a></p></td>
            <td class="t2Col"><p class="MoreList"><a href="ProbeQualVisionOpticsCalFocusLatencyDuration2.htm">ProbeQualVisionOpticsCalFocusLatencyDuration2</a></p></td>
            <td class="last"><p class="MoreList"><a 
            href="VFTScan_LSPX1C_Speed2.htm">VFTScan_LSPX1C_Speed2</a></p></td>
        </tr>
        <tr class="t1Row">
            <td class="t1Col"><p class="MoreList"><a 
            href="DefMoveSpeed.htm">DefMoveSpeed</a></p></td>
            <td class="t2Col"><p class="MoreList"><a            href="ProbeQualVisionOpticsCalFocusLatencyEnabled.htm">ProbeQualVisionOpticsCalFocusLatencyEnabled</a></p></td>
            <td class="last"><p class="MoreList"><a 
            href="VFTScan_LSPX1H_Acceleration1.htm">VFTScan_LSPX1H_Acceleration1</a></p></td>
        </tr>
    </table>

After – here, you can see the thead & /thead and tbody & /tbody structure:

<table class="TableHeadingOnTop" style="border-collapse: separate" 
                                             cellspacing="0" border="1">
    <thead>
        <tr>
            <th><p> </p></th>
            <th><p> </p></th>
            <th><p> </p></th>
        </tr>
    </thead>
    <tbody>
        <tr class="t1Row">
            <td class="t1Col"><p class="MoreList"><a 
             href="DefaultProbeComponents.htm">DefaultProbeComponents</a></p></td>
            <td class="t2Col"><p class="MoreList"><a 
             href="ProbeQualVisionOpticsCalFocusLatencyDuration1.htm">ProbeQualVisionOpticsCalFocusLatencyDuration1</a></p></td>
            <td class="last"><p class="MoreList"><a 
             href="VFTScan_LSPX1C_Speed1.htm">VFTScan_LSPX1C_Speed1</a></p></td>
        </tr>
        <tr class="t2Row">
            <td class="t1Col"><p class="MoreList"><a 
             href="DefMode.htm">DefMode</a></p></td>
            <td class="t2Col"><p class="MoreList"><a 
             href="ProbeQualVisionOpticsCalFocusLatencyDuration2.htm">ProbeQualVisionOpticsCalFocusLatencyDuration2</a></p></td>
            <td class="last"><p class="MoreList"><a 
             href="VFTScan_LSPX1C_Speed2.htm">VFTScan_LSPX1C_Speed2</a></p></td>
        </tr>
        <tr class="t1Row">
            <td class="t1Col"><p class="MoreList"><a 
             href="DefMoveSpeed.htm">DefMoveSpeed</a></p></td>
            <td class="t2Col"><p class="MoreList"><a 
             href="ProbeQualVisionOpticsCalFocusLatencyEnabled.htm">ProbeQualVisionOpticsCalFocusLatencyEnabled</a></p></td>
            <td class="last"><p class="MoreList"><a 
             href="VFTScan_LSPX1H_Acceleration1.htm">VFTScan_LSPX1H_Acceleration1</a></p></td>
        </tr>
    </tbody>
</table>

Please let me know if there’s a way to do this – thanks!

Here’s a clarification of the challenge I’m facing:

// In this function, I want to insert the thead structure
// and the opening and closing tbody tags...
// this function receives the value of the number of
// columns in the table and the table's ID name...
function createtheadstruct(colcount, id_name_new){
    var table = document.getElementById(id_name_new);
    var header = table.createTHead();
    var row = header.insertRow(0);
    var theadcntr = colcount-1;
    var cell
    
    // Here I'm inserting the thead data rows (td)
    // based on the column counter (theadcntr)
    for (var i=0; i<=theadcntr; i++) {
        cell = row.insertCell(i);
        cell.innerHTML = "$#160;";
    }
    
    //After the thead structure is created, I want to insert the opening tbody tag.
    //Since the rows and cells of table's body are already there, I want to insert
    //the opening tbody tag right after the closing thead tag (/thead) and then the
    //closing tbody tag (/tbody) before the closing table tag (/table)
}```

Answer

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 tags to your table with JavaScript.

Try this on JSFiddle, it seems to work just fine for me!

// First create a table to be used as an example.
const table = document.getElementById('test-table-1')
const head = document.createElement('thead')

// Create 3 th tags for an example.

const th1 = document.createElement('th')
th1.appendChild(document.createTextNode('Test Header 1'))

const th2 = document.createElement('th')
th2.appendChild(document.createTextNode('Test Header 2'))

const th3 = document.createElement('th')
th3.appendChild(document.createTextNode('Test Header 3'))

// Add the th tags to the thead
head.appendChild(th1)
head.appendChild(th2)
head.appendChild(th3)

// Give the table the thead.
table.appendChild(head)

// Now we have a table to work with.

// Create a tbody.
const tbody = document.createElement('tbody')

// Add a couple of rows.
const tr1 = tbody.insertRow()
const tr2 = tbody.insertRow()

// Add td tags to to rows.
for (let tr of [tr1, tr2]) {
    for (let i=0; i<3; i++) {
    const td = tr.insertCell(i)
    td.innerText = 'foo'+i
  }
}

// Add the tbody to the table.
table.appendChild(tbody)

<table id="test-table-1"></table>

Advertisement

Answer