jQuery add HTML table column
html, html-table, jquery
Solution
Update...
var c = $("#myTable tr:first td").length;
$("#myTable tr:first").append("<td><a href=''>Delete</a> Col "+(c+1)+"</td>");
$("#myTable tr:gt(0)").append("<td>Col</td>");
If you need to fix the numbering in the titles, you can use the function we worked on in your previous question.
Original Answer...
$("#myTable tr").append("<td>New Column</td>");
Or, if you want to add a header too, you can limit the previous line to all TR greater than 0:
$("#myTable tr:gt(0)").append("<td>New Column</td>");
And the header would only be on the first TR:
$("#myTable tr:first").append("<td>Delete Column LINK</td>");
Problem
I have a HTML table like this: ``` <table border="1"> <tbody> <tr> <td><a href="#" class="delete">DELETE ROW</a>COL 1</td> <td><a href="#" class="delete">DELETE COL</a>COL 2</td> <td><a href="#" class="delete">DELETE COL</a>COL 3</td> <td><a href="#" class="delete">DELETE COL</a>COL 4</td> <td><a href="#" class="delete">DELETE COL</a>COL 5</td> <td><a href="#" class="delete">DELETE COL</a>COL 6</td> </tr> <tr> <td>ROW 1</td> <td>ROW 1</td> <td>ROW 1</td> <td>ROW 1</td> <td>ROW 1</td> <td>ROW 1</td> </tr> <tr> <td>ROW 2</td> <td>ROW 2</td> <td>ROW 2</td> <td>ROW 2</td> <td>ROW 2</td> <td>ROW 2</td> </tr> </tbody> </table> ``` What I need is a function to add a new column with a number of td's based on other columns. The thing is that in this HTML table, columns are removed with jQuery before new columns are added so the function needs to get the current column config and adapt accordingly because the rows and columns are always being removed or added. I have this code for adding a new column but it doesn't add the header: ``` function addACol() { var currentNumberOfTDsInARow = $('.tblModel tr:first td').length; newColNum = currentNumberOfTDsInARow; var rows = $('.tblModel tbody tr'); for (var i = 0; i < rows.length; i++) { var lastTDClone = $(rows[i]).find('td:last').clone(); $(rows[i]).find('td:last').after(lastTDClone); } } ```