Question

我有下面的代码，我用它来创建一个表，然后使用JSON中的数据填充它。我的问题是我有几个数据对象，并希望使用select标签在它们之间切换。你能帮忙吗？

HTML

<select name="selector" onchange="onDataChange();">
    <option value="data1">RD1</option>
    <option value="data2">RD2</option>
    <option value="data3">RD3</option>
</select>

JSON数据

var data1 = [
    {"value":"RD01"}, 
    {"value":"RD02X"},
    {"value":"RD021ZX"}
];
var data2 = [
    {"value":"AX761"}, 
    {"value":"GT02X"},
    {"value":"GB051ZX"}
];
var data3 = [
    {"value":"BG761"}, 
    {"value":"OP02Z"},
    {"value":"FBL1ZX"}
];

JQuery的

function onDataChange(){
    var select = $("select[name=selector]").val();
    //some logic
}
function buildTable(){
    var table = $(".code-table");
    for(i = 0; i < data.length; i++){
        var row = "<tr><td>" + data[i].value + "</td></tr>";
        table.append(row);
    }
}
buildTable();

Answer 1

最简单的解决方案是将参数添加到buildTable()

function onDataChange(){
    var select = $("select[name=selector]").val();
    if (select == 'data1') buildTable(data1);
    else if (select == 'data2') buildTable(data2);
    else if (select == 'data3') buildTable(data3);
    //some logic
}

function buildTable(data){
    $(".code-table tr").remove(); //clear out table
    var table = $(".code-table");
    for(i = 0; i < data.length; i++){
        var row = "<tr><td>" + data[i].value + "</td></tr>";
        table.append(row);
    }
}
buildTable(data1);

使用JQuery在JSON数据之间进行选择

1 个答案: