Jaylen Jaylen - 3 months ago 14
jQuery Question

How can I add column at the end of html table on the fly using jQuery?

I am trying to add a column at the end of an html table on the fly using jQuery.

I created the following HTML table.

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

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

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

</table>


Then I added the following JQuery code

$('.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>');
});


But for some reason this is not working. No column are being added to the table. Not even the table is visible.

How can I fix this issue?

Answer

Check this 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>
Comments