向表主体和表头添加新列

Add new column into table tbody and thead

本文关键字：添加新列表头主体更新时间：2023-09-26

你能帮我在表中添加新的列吗?表有标题和主体，我需要添加列与标题(th)"Details"，并且每行(即td)都需要在内部有链接。例如Link。在第二列之后插入新列

<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>

在jQuery中你选择并做一些事情:

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

上面的代码选择thead中的tr，并附加( )中的内容。

$( 'tbody tr' ).each( function() {
    var theLink = '<a href="#">link</a>';
    $( this ).append( '<td>' + theLink + '</td>' );
} );

上面的代码在tbody中选择tr。在每一个上面，做一些其他的事情，比如

定义theLink对象
选择this(当前tr)并在( )中添加任何内容，包括theLink对象。

这应该会帮助你开始，阅读jQuery文档了解更多信息:-)

由于您的问题被标记为"jquery"标签…你可以这样做:

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

Working Fiddle demo

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