如何使用jQuery在html表格末尾添加列？

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/