如何使用固定头，但动态列创建HTML表 [英] How to Create HTML table with fixed header but dynamic column

问题描述

我有两个HTML buttons.One名为3天等命名week.Based上的任意一个按钮，我需要创建一个动态表头固定而是动态column.For例如点击，假设我点击3天按钮，然后将得到的表应该是与2个固定头部，用1,2,3 3动态列作为column.LIke的名字明智的，如果点击了周按钮，然后HTML表格应与2个固定的头和7列与列名1 ，2,3,4,5,6。

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.For example,Suppose i clicked on 3days button,then the resultant table should be with 2 fixed headers and 3 dynamic column with 1,2,3 as name of the column.LIke wise if clicked on week button then HTML table should be with 2 fixed headers and 7 columns with column name as 1,2,3,4,5,6.

我有一个HTML表，但如何动态地使用AJAX和jQuery我没有得到的创建，

I have a HTML table but how to create it dynamically using ajax and jquery i am not getting that,

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>

请帮我解决这个..

推荐答案

您想是这样的：

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元素对方的回答），但是这应该给你列数了一点灵活性。

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.

修改
下面是一个更新的的jsfiddle 与表的切换行为。

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

这篇关于如何使用固定头，但动态列创建HTML表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！