Question

我想通过从javascript循环创建可折叠列表（jquery mobile）。从循环中我想要可折叠列表从json对象获取内容。我用于循环的对象道具是tipe，但不知何故它由所有tipe创建了一个可折叠列表，而我想要的并不是全部tipe
（例如{{1}来自json的1}}是“ESL”，“ESL”，“ESL”，“UHT”，“UHT”，“WHP”，“WHP”，“WHP”，“WHP”，我想要创建可折叠列表，如“ ESL“，”UHT“，”WHP“）

这是我到目前为止所做的＆gt;＆gt; http://jsfiddle.net/sevtiandy/seXmc/36/

tipe

这是数组：

for (i = 0; i < data[result].length; i++) {
        details +=
"<div data-role='collapsible' data-collapsed='true' data-theme='b' data-content-theme='c'>"+
"<h3>" + data[result][i].tipe + "</h3>"+
"<table width='100%' border='1' id='"+data[result][i].tipe+"'>"+
    "<tr>"+
        "<td rowspan='3' align='center' valign='middle' bgcolor='#CCCCCC'>MARKET CHANNEL</td>"+
        "<td colspan='2' align='center' valign='middle' bgcolor='#CCCCCC'>"+bulan3+"</td>"+
        "<td colspan='2' align='center' valign='middle' bgcolor='#CCCCCC'>"+bulan2+"</td>"+
        "<td colspan='8' align='center' valign='middle' bgcolor='#CCCCCC'>"+bulan1+"</td>"+
    "</tr>"+
    "<tr>"+
        "<td colspan='2' align='center' valign='middle' bgcolor='#CCCCCC'>ACT.</td>"+
        "<td colspan='2' align='center' valign='middle' bgcolor='#CCCCCC'>ACT.</td>"+
        "<td colspan='2' align='center' valign='middle' bgcolor='#CCCCCC'>PRO.</td>"+
        "<td colspan='2' align='center' valign='middle' bgcolor='#CCCCCC'>ACT.</td>"+
        "<td colspan='2' align='center' valign='middle' bgcolor='#CCCCCC'>BUD.</td>"+
        "<td colspan='2' align='center' valign='middle' bgcolor='#CCCCCC'>ACV. (%)</td>"+
    "</tr>"+
    "<tr>"+
        "<td align='center' valign='middle' bgcolor='#CCCCCC'>VAL</td>"+
        "<td align='center' valign='middle' bgcolor='#CCCCCC'>%</td>"+
        "<td align='center' valign='middle' bgcolor='#CCCCCC'>VAL</td>"+
        "<td align='center' valign='middle' bgcolor='#CCCCCC'>%</td>"+
        "<td align='center' valign='middle' bgcolor='#CCCCCC'>VAL</td>"+
        "<td align='center' valign='middle' bgcolor='#CCCCCC'>%</td>"+
        "<td align='center' valign='middle' bgcolor='#CCCCCC'>VAL</td>"+
        "<td align='center' valign='middle' bgcolor='#CCCCCC'>QTY</td>"+
        "<td align='center' valign='middle' bgcolor='#CCCCCC'>VAL</td>"+
        "<td align='center' valign='middle' bgcolor='#CCCCCC'>QTY</td>"+
        "<td align='center' valign='middle' bgcolor='#CCCCCC'>VAL</td>"+
        "<td align='center' valign='middle' bgcolor='#CCCCCC'>QTY</td>"+
    "</tr>"+    
"</table>"+
"</div>";
    }

    $("#tipe_" + kodenegara)
        .empty()
        .append(details)
        .trigger('create');
    $("#tipe_" + kodenegara).ready(function() {
        $('table.alt tr:odd').addClass('odd');
        $('table.alt tr:even').addClass('even');
    });

还有一件事，在我的可折叠列表中，有一个表，我想为行背景创建“斑马条”，该怎么做？

由于

Answer 1

您需要将数据循环两次：

var data = [
    // Data simplified and shortened for brevity
    {"type": "ESL", "val1": 17, "val2" 9.5},
    {"type": "ESL", "val1": 17, "val2" 9.5},
    {"type": "UHT", "val1": 17, "val2" 9.5},
    {"type": "ESL", "val1": 17, "val2" 9.5}
];

var final_results = {},
    type,
    current_row;
for (var i=0, l=data.length; i<l; i++) {
    current_row = data[i];
    type = current_row.type;
    // If we haven't seen this type before
    if (!final_results[type]) {
        // Add a results object designed to store multiple values of each key
        final_results[type] = {
            "val1": [],
            "val2": []
        };
    }
    // Then we can add the current data safely either way
    // This could be pushed into a function for reusability and clarity
    final_results[type].val1.push(current_row.val1);
    final_results[type].val2.push(current_row.val2);
    // More here as needed
}
// Now we can loop over the data in final_results
for (var entry in final_results) {
    if (Object.prototype.hasOwnProperty.call(final_results, entry)) {
        // Write out values to HTML here - better yet, use a templating engine
    }
}

为什么我的循环创建重复结果？

1 个答案: