我需要动态生成 html 表并在下面列出 driver_id。它类似于枢轴,但问题是 zone_name 可以每天更改。我正在使用 jquery 和 linq.js。
到目前为止我已经尝试过:
var data =
[
{
"ColorCode": "green",
"StatusName": "ACTIVE",
"rankId": 0,
"zone_name": "Zone A",
"driver_id": 100,
"zone_rank": 1,
"status_id": null,
"company_id": null,
"updated_on": null,
"Driver": null,
"login_status": null
},
{
"ColorCode": "yellow",
"StatusName": "BREAK",
"rankId": 0,
"zone_name": "Zone B",
"driver_id": 101,
"zone_rank": 1,
"status_id": null,
"company_id": null,
"updated_on": null,
"Driver": null,
"login_status": null
},
{
"ColorCode": "green",
"StatusName": "ACTIVE",
"rankId": 0,
"zone_name": "Zone A",
"driver_id": 102,
"zone_rank": 4,
"status_id": null,
"company_id": null,
"updated_on": null,
"Driver": null,
"login_status": null
}
]
var zTable = document.getElementById('tblZoneRank');
var allzones = Enumerable.From(data)
.Distinct(p => p.zone_name)
.Select(p => p.zone_name).ToArray();
$.each(allzones, function (i, item) {
var tr = document.createElement('tr');
var td = document.createElement("td");
var txt = document.createTextNode(item);
td.appendChild(txt);
tr.appendChild(td);
var childItem = Enumerable.From(data)
.Where(p => p.zone_name == item)
.ToArray();
$.each(childItem, function (j, citem) {
var ctd = document.createElement("td");
var ctxt = document.createTextNode(citem.driver_id);
ctd.appendChild(ctxt);
$(ctd).css('background-color', citem.ColorCode);
tr.appendChild(ctd);
});
zTable.appendChild(tr);
});
它以这种方式给我输出:
<table id="tblZoneRank">
<tr>
<td>Zone A</td>
<td style="background-color: rgb(0, 128, 0);">100</td>
<td style="background-color: rgb(0, 128, 0);">102</td>
</tr>
<tr>
<td>Zone B</td>
<td style="background-color: rgb(255, 255, 0);">101</td>
</tr>
</table>
但我需要以这种格式输出:它应该将 zone_name 显示为列名,并在 driver_id 下方显示,第一个 id 应该是 zone_rank 1 和 2,依此类推..