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

-2

我有两个HTML按钮，一个名为3days和其他指定的星期。基于点击这些按钮中的任何一个，我需要创建一个带有固定标题但动态列的动态表格。例如，假设我点击了3days按钮，那么结果表应该有2个固定标题和3个动态列，其中1,2,3作为列的名称。同样如果点击周按钮，那么HTML表格应该有2个固定标题和7列列名为1,2,3,4,5,6。如何创建具有固定标题但动态列的HTML表格

我有一个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>

请帮我解决这个..

来源

2014-05-11 user3622611

你将如何格式化表格，请给越来越添加真实的例子，而不是列1，2 .. – mrdeveloper

@mrdeveloper列名都是为了从DD/MM/YY datetype – user3622611

你想是这样的：

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

jsfiddle

这将让你周围的列数轻易改变。当然，还有其他方法可以做到这一点（比如切换tbody元素的其他答案），但这应该会让您在列计数方面有一点灵活性。

编辑
这里是一个更新的jsfiddle与表的切换行为。

来源

2014-05-11 12:27:28

先生，我需要列也添加例如，如果它的3天然后3列和像这样...我需要按钮点击evcent onl; y – user3622611

我觉得你正在寻找我这样做对你而言，那不会发生。我已经给了你一个出发点，所以有了它。祝你好运... –

更新的代码：

$("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/

来源

2014-05-11 12:17:15 mrdeveloper

DD目前表格单元格，而我需要的表列 – user3622611

检查更新代码 – mrdeveloper

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

回答

相关问题