How to append a whole new column to an existing table?

Question

As the title says, I'm looking to add a new column to a table that exists which you can see here: https://onetoso.com/PSOTesting/Shane/HTML/customCookieList.html

My blocker right now is the tr does not have a class name so I can't append to each row. I've created a new column header by doing:

This creates a new th so I need to generate the field underneath it as well for each respective row.

let newHead = document.createElement('th'); newHead.class = 'ot-table-header'; newHead.innerHTML = 'Description'; document.querySelector('tr').appendChild(newHead);

To add the necessary field I require to the table I have this:

let newRow = document.createElement('td'); newRow.class = 'ot-cookie-desc-td'; newRow.innerHTML = 'Example text'; document.querySelector('tbody tr').appendChild(newRow);

This will add 1 td that I require but how would I add to the additional rows that already exist since there is no way to specifically target those? I'm looking to copy the same format as the existing table.

Answer 1

This is a demo showing how to add a column to a table already existing in the dom.

The function addColumn(table, headerText, rowContents) given a table, the text of the header for the new column and column data contained by each row; just adds the new column to the table as specified by the args.

The demo calls such function inside the useCase() that gets triggered when the button gets clicked.

The table used was taken from the link included in your question but to be better focused I stripped off the details that were just adding noise.

It's worthwhile saying that there's no indicators in your tables to select them in a page holding multiple ones. So in absence of ids or a combination of css class that would make a non ambiguos selector, in my demo I just picked it with document.querySelector('table')

function useCase(){
  const table = document.querySelector('table');
  addColumn(table, 'newColumn', ['NewContentForRow1','NewContentForRow2']);
}

function addColumn(table, headerText, rowContents){  
  
  const newHeaderCol = document.createElement('th');
  newHeaderCol.innerText = headerText;      
  table.querySelector('thead > tr:first-child').append(newHeaderCol);
  
  const tableRows = table.querySelectorAll('tbody > tr');
  let iRow = 0;
  for(const tableRow of tableRows){
    const newBodyCol = document.createElement('td');    
    newBodyCol.innerText = rowContents[iRow++];
    tableRow.append(newBodyCol);
  }
}

table, tr, th, td {
  border: solid 1px black;
}

button{
  margin-top: 1rem;
  cursor: pointer;
}

<table>
  <caption class="ot-scrn-rdr">Strictly Necessary Cookies</caption>
  <thead>
    <tr>
      <th scope="col" class="ot-table-header ot-host">Cookie Subgroup</th>
      <th scope="col" class="ot-table-header ot-cookies">Cookies</th>
      <th scope="col" class="ot-table-header ot-cookies-type">Cookies used</th>
      <th scope="col" class="ot-table-header ot-life-span">Lifespan</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row1[A]</td>
      <td>Row1[B]</td>
      <td>Row1[C]</td>
      <td>Row1[D]</td>               
    </tr>
    <tr>
      <td>Row2[A]</td>
      <td>Row2[B]</td>
      <td>Row2[C]</td>
      <td>Row2[D]</td>               
    </tr>
  </tbody>
</table>

<button onclick="useCase();">Add Column</button>