Question

I’ve searched a bit for a plugin but I didn’t find anything for this case.

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

Is there any way to make the columns change according to the dropdown? For example: If I choose “2”, there would be 2 columns with all the data. So I don’t want to hide any columns, just move the content in to different rows, depending on the dropdown choice.

Fiddle: http://jsfiddle.net/2CHzp/1/

Answer 1

You can do this…

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);   
}