How To Create Html Table With Fixed Header But Dynamic Column

I have two HTML buttons, one named 3days and other named week. Based on the click of any of these buttons I need to create a dynamic table with Fixed Headers but dynamic column. Fo

Solution 1:

You want something like this:

HTML

<divid="table"><table><thead><tr><th>Column A</th><thid="flex-header">Column B</th></tr></thead><tbody><tr><td></td><td></td></tr></tbody></table></div><buttonvalue="3">3</button><buttonvalue="7">7</button>

JS

$(function () {
    $("button").click(function (e) {
        var cols = $(this).val();

        // You'll want to do something here to get the column datavar data = $("<tr></tr>").append($("<td>Col 0</td>"));
        for (i = 0; i < cols; i++) {
            data.append($("<td>Col " + (i + 1) + "</td>"));
        }
        $("#flex-header").prop("colspan", cols);
        $("#table table tbody").html("").append(data);
    });
});

jsfiddle

This will allow you to change around the number of columns easily. Of course, there are other ways to do it (like the other answer with toggling tbody elements) but this should give you a little flexibility with the column counts.

EDIT Here is an updated jsfiddle with the table toggle behavior.

Solution 2:

Updated Code:

   $("table").hide();
$("#3").click(function(){
    $("table").show();
    $("th:gt(2)").hide();  
    $("td:gt(2)").hide();  
});

$("#7").click(function(){
     $("table").show();
    $("th:lt(7)").show();  
    $("td:lt(7)").show();  
});

Demo:http://jsfiddle.net/hsakapandit/3kUjR/2/