CODEWITHSUNDEEP
jqueryhtmlhtml-table
Manny Calavera
Manny Calavera

Reputation: 6873

jQuery add HTML table column

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

Upvotes: 20

Views: 84506

Answers (2)

SolutionYogi
SolutionYogi

Reputation: 32243

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

Upvotes: 10

Sampson
Sampson

Reputation: 268364

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

Upvotes: 44

Related Questions