Add new column into table tbody and thead

Question

could you please help me with adding new column into table. Table has thead and tbody, I need to add column with heading (th) "Details", and each row (that is td) needs to have link inside.for example Link. New column should be inserted after second column.

<table>
            <thead>
                <tr>
                    <th></th>
                    <th>Title</th>
                    <th>Author</th>
                    <th># comments</th>
                    <th>Publication date</th>
                    <th>Updated</th>
                    <th>Type</th>
                    <th>Section</th>
                    <th>Language</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox"></td>
                    <td><a href="#">Lorem ipsum #1</a></td>
                    <td>Name</td>
                    <td>3 comments</td>
                    <td>2014-05-07 15:00</td>
                    <td>2014-05-07 15:00</td>
                    <td>Article</td>
                    <td><a href="#">Standard</a></td>
                    <td>English</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td><a href="#">Lorem ipsum #2</a></td>
                    <td>Name</td>
                    <td>3 comments</td>
                    <td>2014-05-07 14:00</td>
                    <td></td>
                    <td>Article</td>
                    <td><a href="#">Standard</a></td>
                    <td>English</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td><a href="#">Lorem ipsum #3</a></td>
                    <td>Name</td>
                    <td></td>
                    <td>2014-05-07 13:00</td>
                    <td></td>
                    <td>Forum post</td>
                    <td><a href="#">Forum</a></td>
                    <td>Polish</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td><a href="#">Lorem ipsum #4</a></td>
                    <td>Name</td>
                    <td>25 comments</td>
                    <td>2014-05-07 12:00</td>
                    <td>2014-05-07 15:00</td>
                    <td>Blog post</td>
                    <td><a href="#">Blog</a></td>
                    <td>French</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td><a href="#">Lorem ipsum #5</a></td>
                    <td>Name</td>
                    <td>35 comments</td>
                    <td>2014-05-07 11:00</td>
                    <td>2014-05-07 15:00</td>
                    <td>Blog post</td>
                    <td><a href="#">Blog</a></td>
                    <td>English</td>
                </tr>
            </tbody>
        </table>

Answer 1

In jQuery you select and do something:

$( 'thead tr' ).append( '<th>Details</th>' );

The above code selects the tr inside the thead , and appends whatever is in the ( ) .

$( 'tbody tr' ).each( function() {

    var theLink = '<a href="#">link</a>';

    $( this ).append( '<td>' + theLink + '</td>' );

} );

The above code selects tr in tbody . And on each of it, do some other things which are:

1. Defining theLink object
2. Select this (the current tr) and append whatever in the ( ) including the theLink object.

This should help you to get started, read jQuery docs for more information :-)

Answer 2

As your question is marked with "jquery" tag... you could do this:

$("tr:not(:first)").append('<td><a href="link">Link</a></td>');
$("tr").first().append("<th>Details</th>");

Working Fiddle demo

Answer 3

var _ky = 0;
//  Below code append column in thead
$('#table_id').find('thead').find('tr').each(function () {
var tr = $(this);
tr.append('<th>Write Heading Here</th>');
});
//  Below code append column in tbody
$('#table_id').find('tbody').find('tr').each(function () {
var tr = $(this);
tr.append('<td>' + _ky + '</td>');
_ky += 1;
});