jquery 동적 테이블 열

Question

Ive가 플러그인을 조금 찾았지만이 경우에는 찾지 못했습니다.

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

드롭 다운에 따라 열을 변경하는 방법이 있습니까? exanple의 경우 : "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> 

와 사업부로 테이블을 변환하지 않으려면 CSS를 사용하여 드리겠습니다 아니다 자바 스크립트

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

사용하는 동적 생성. 그것은 당신이 수정 폭과 플로트 스타일

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