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

Fiddle: 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>

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, если вы не хотите конвертировать вашу таблицу в div с фиксированной шириной и стилем float

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