Jquery 如何创建标题固定但列动态的HTML表

我有两个HTML按钮，一个名为3days，另一个名为week。在单击这些按钮的基础上，我需要创建一个具有固定标题但动态列的动态表。例如，假设我单击了3days按钮，那么结果表应该有2个固定标题和3个动态列，列名为1,2,3。同样，如果单击week按钮，HTML表应该有2个固定的标题和7列，列名称为1,2,3,4,5,6

我有一个HTML表，但是如何使用ajax和jQuery动态创建它呢？我不明白

HTML表格

 <div id="table">
    <table style="height:500px">
    <thead>
    <tr>
        <th>Column 2</th>
        <th>Column 3</th>
   </tr>
 </thead>
 <tbody>
    <tr><td>Cell 1</td><td>Cell 2</td><td>Cell 3</td><td>Cell 4</td>
 </tbody>
 </table>
 </div>

第2栏
第3栏
电池1电池2电池3电池4

---

请帮助我解决此问题。

更新代码：

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

---

演示：

您想要这样的东西：

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>

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

A列
B栏
3.
7.

JS

<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>

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

$（函数（）{
$（“按钮”）。单击（功能（e）{
var cols=$（this.val（）；
//您需要在此处执行一些操作以获取列数据
变量数据=$（“”）。追加（$（“列0”）；
对于（i=0；i

这将允许您轻松更改列数。当然，还有其他方法可以做到这一点（就像切换tbody元素的另一个答案），但这应该会给您一些列计数的灵活性

编辑

---

这是一个更新的表格切换行为。

如何设置表格格式，请给出实际示例，而不是第1列，2..@mrdeveloper列名是指dd/mm/yy日期类型中的dd，目前正在添加表格单元格，而我需要表格列Sir我也需要添加列，例如，如果是3天，则需要3列，诸如此类…我需要表格打开按钮单击evcent onl；我有种感觉，你在找我为你做这件事，而那是不会发生的。我已经给了你一个起点，你也来看看吧。祝你好运。。。