Как создать таблицу HTML с фиксированным заголовком, но динамический столбец

Question

У меня есть две кнопки HTML, одна из которых называется 3days и другая именованная неделя. На основе щелчка любой из этих кнопок мне нужно создать динамическую таблицу с фиксированными заголовками, но динамический столбец. Например, предположим, что я нажал кнопку 3days, тогда результирующая таблица должна быть с 2 фиксированными заголовками и 3 динамическими столбцами с 1,2,3 в качестве имени столбца. LIkewise, если щелкнуть по кнопке недели, тогда таблица 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

Вы хотите что-то вроде этого:

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), но это должно дать вам небольшую гибкость при подсчете столбцов.

EDIT
Вот обновленный 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/