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

使用动态生成。使用css是不可行的，除非您想将表转换为具有固定宽度和浮动样式的div

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

Answer 2

你可以这样做......

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

jQuery动态表列

2 个答案: