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

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

我有一个HTML表，但如何使用ajax和jQuery动态创建它？ 我没有得到那个。

HTML表..

 
 
 
 
Column 2
 
Column 3
 
 
 
 
Cell 1
Cell 2
Cell 3
Cell 4
 
 
  

请帮我解决这个问题..

Answer 1

你想要这样的东西：

HTML

 
 
 
 
 
Column A
 
Column B
 
 
 
 
 
 
 
 
 
 
 3 7 

JS

 $(function () { $("button").click(function (e) { var cols = $(this).val(); // You'll want to do something here to get the column data var data = $("").append($("Col 0")); for (i = 0; i < cols; i++) { data.append($("Col " + (i + 1) + "")); } $("#flex-header").prop("colspan", cols); $("#table table tbody").html("").append(data); }); }); 

的jsfiddle

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

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

Answer 2

更新的代码：

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