如何使用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/