Question

我有两个HTML按钮，一个名为3days，另一个名为week。基于单击任何这些按钮，我需要创建一个带有固定标题但动态列的动态表。例如，假设我单击了3days按钮，那么结果表应该有2个固定标题和3个动态列，1,2,3作为列的名称。如果单击星期按钮，那么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>

请帮我解决这个问题..

Answer 1

更新代码：

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

演示： http://jsfiddle.net/hsakapandit/3kUjR/2/

Answer 2

你想要这样的东西：

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

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

修改
以下是包含表格切换行为的更新jsfiddle。

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

2 个答案: