jquery動態表列

Question

我搜索了一下插件，但我沒有找到任何東西的情況。

<table> 
<tr> 
    <td> 
     1 
    </td> 
    <td> 
     2 
    </td> 
    <td> 
     3 
    </td> 
</tr> 
<tr> 
    <td> 
     4 
    </td> 
    <td> 
     5 
    </td> 
    <td> 
     6 
    </td> 
</tr> 
<tr> 
    <td> 
     7 
    </td> 
    <td> 
     8 
    </td> 
    <td> 
     9 
    </td> 
</tr> 
</table> 
<select name="" id=""> 
<option value=""> 
    1 
</option> 
<option value=""> 
    2 
</option> 
<option value=""> 
    3 
</option> 
</select> 

有什麼辦法讓列根據下拉改變嗎？例如：如果我選擇「2」，則會有2列包含所有數據。所以我不想隱藏任何列，只是將內容移動到不同的行，取決於下拉選擇。

小提琴：http://jsfiddle.net/2CHzp/1/

Answer 1

你可以這樣做......

HTML

<div id="content"> 
</div> 

<select name="" id="select"> 
    <option value="1"> 
     1 
    </option> 
    <option value="2"> 
     2 
    </option> 
    <option value="3"> 
     3 
    </option> 
</select> 

一個div並不可行Javascript

$(function() { 
    $("#select").change(function() { 
     updateTable(); 
    }) 

    updateTable(); 
}); 

function updateTable() { 
    var columnCount = $("#select").val(); 
    var html = "<table><tr>"; 
    for (i = 0; i!=columnCount;i++) { 
     html = html + "<td>" + (i+1) + "</td>"; 
    } 
    html = html + "</tr></table>"; 
    $("#content").html(html); 
} 

Answer 2

使用動態生成。它使用CSS，除非你想你的錶轉換成具有固定的寬度和浮動風格

var txt = '<table>'; 
var count = 0; 
var select_value = 2; 
for (var i in data) { 
    if (count==0) txt += '<tr>'; 
    txt += data[i]; 
    count++ 
    if (count>=select_value) { 
     txt += '</tr>'; 
     count=0; 
    } 
} 
txt += '</table>';