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

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

JS

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

        // You'll want to do something here to get the column data
        var 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/