Question

我正在尝试使用jQuery动态地在html表的末尾添加一列。

我创建了以下HTML表格。

<table class="table table-bordered table-striped" id="reportColumns">

    <thead>
        <tr></tr>
    </thead>

    <tbody>
        <tr></tr>
    </tbody>

</table>

然后我添加了以下JQuery代码

 $('.checkbox').click(function(){
        var id = $(this).attr('data-tag');

        $( "#reportColumns > thead > tr" ).append('<th id="'+ id +'">Some Column header</th>');

        $( "#reportColumns > tbody > tr" ).append('<td>-</td>');
 });

但由于某种原因，这不起作用。没有列添加到表中。甚至没有桌子可见。

如何解决此问题？

Answer 1

选中此jsfiddle

    <table class="table table-bordered table-striped"     id="reportColumns">

        <thead>
            <tr>fasdfsa</tr>
        </thead>

        <tbody>
            <tr>afsdfa</tr>
        </tbody>

    </table>
    <div class="checkbox">Click me</div>

Answer 2

  $("#reportColumns thead tr").append('<th id="'+ id +'">Some Column header</th>')
  $("#reportColumns tbody tr").append('<td>-</td>')

https://jsfiddle.net/sajjansarkar/v9gvjxjz/3/

如何使用jQuery动态添加html表末尾的列？

2 个答案: