jQuery add HTML table column

Question

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);
    }
}

score 44 · Accepted Answer · edited Jun 20 '20 at 09:12

44

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>");

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 02 '09 at 16:38

Sampson

265,109
74
539
565

That's the thing...It actually needs to calculate the number of td's from the last column or something... There are many rows.. – Manny Calavera Jul 02 '09 at 16:40
If you're adding only a single column, you're inserting only a single for each . – Sampson Jul 02 '09 at 16:42
If you want to figure out what number to put in there, you can cycle through the td's on that tr and re-insert numbers for each based upon their index. – Sampson Jul 02 '09 at 16:43
Maybe you can explain what you mean by calculate the last column. Give an exmaple of the values in the other column. – Vincent Ramdhanie Jul 02 '09 at 16:43
Glad I could help. If we keep this up, I'll end up becoming your official jQuery guy - I'll expect to be paid in cash :) – Sampson Jul 02 '09 at 17:11
this does not work as expected. it shows "col" on all the cell, i expect it to show col 1, col 2, col 3, col4 and so on as the example html. – David Jul 06 '10 at 07:19

score 10 · Answer 2 · answered Jul 02 '09 at 17:03

Not related to your question but you can make your HTML bit more semantic.

<table border="1">
    <thead>
        <tr>
            <th><a href="#" class="delete">DELETE ROW</a>COL 1</th>
            <th><a href="#" class="delete">DELETE COL</a>COL 2</th>
            <th><a href="#" class="delete">DELETE COL</a>COL 3</th>
            <th><a href="#" class="delete">DELETE COL</a>COL 4</th>
            <th><a href="#" class="delete">DELETE COL</a>COL 5</th>
            <th><a href="#" class="delete">DELETE COL</a>COL 6</th>
        </tr>
    </thead>
    <tbody>
        <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>

Modified jQuery code may look like:

var c = $("#myTable thead th").length;
$("#myTable thead tr").append("<th><a href=''>Delete</a> Col "+(c+1)+"</th>");
$("#myTable tr:gt(0)").append("<td>Col</td>");

Or make the last line of code be this instead: `$("#myTable tbody tr").append("Col");` and do away with the `:gt(0)`. — Tauren, Aug 25 '10 at 20:49

jQuery add HTML table column

2 Answers2

Update...

Original Answer...

Linked