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>';