Prepend/Append columns at beginning of table

Question

How do I prepend/append columns at beginning/end of my html table after exited with </table>markup?

(when before hitting the </table> mark)

• <tr> naturally appends rows
• <td> naturally appends cols/cells to the row

Javasript has a way of catching the table afterwards and modify the table: E.g. table.insertRow() with some functionality on where to insert the row. Also, a kind of table.prepend() function exists, but which I cant really get working.

My table is horizontally scrollable, so I want to load more data (more columns) when user scrolls all the way to the end, both left and right. I have a way of detecting this but it's the action afterwards I'm having difficulties with.

Isn't there a table.insertColumn(hereOrThere)somewhere... hidden? ;)

Answer 1

there is no built in way to prepend a column but you can do it by looping over all the rows, and preprending a cell to each row

function prependColumn(column) {
  $('tr').each((i, tr) => {
    $(tr).prepend('<td>' + column[i] + '</td>')
  })
}

prependColumn(['cell0','cell1', 'cell2', 'cell3'])