如何創建具有固定標題但動態列的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表格

回答

相關問題