使用jquery对表中的数据重新排序 [英] Reorder Data in Table using jquery each
问题描述
我从数据库中提取了这组数据.价格不同,但是一些数据是多余的.
I have this set of data pulled from the database. The prices are different but some data are redundant.
这是数据的屏幕截图.
Here's the screenshot of the data.
我希望它看起来像的桌子是这个.
The table that I want it to look like is this.
我使用.each()
在jQuery中排列了它们,但我得到的是史诗般的失败.
I arranged them in jQuery using .each()
but what I got is an epic fail.
只有标题和第一行是正确的.这是我的代码:
Only the header and first body row is correct. Here's my code:
var route_price_table = '';
route_price_table = '<table class="table table-bordered table-striped"><thead><tr><th>SEA</th>';
var initial_boxname = '';
var iterator = 0;
var iterator2 = 0;
var length = data.length;
var route_price_body_table = '';
var route_price_body_table2= '';
var initial_routename = '';
$.each( data, function( key, value ) {
if(iterator == key){
initial_routename = value.Route;
route_price_table += '<th>' + value.BoxName + '</th>';
initial_boxname = value.BoxName;
if(initial_routename == value.Route){
route_price_body_table += '<tr><td>' + value.Route + '</td><td>' + value.Price + ' (' + value.BoxName + ')</td>';
}
}
if(initial_boxname != value.BoxName){
initial_boxname = value.BoxName;
route_price_table += '<th>' + value.BoxName + '</th>';
route_price_body_table += '<td>' + value.Price + ' (' + value.BoxName + ')</td>';
}
if(initial_routename != value.Route){
route_price_body_table2 += '<tr><td>' + value.Route + '</td><td>' + value.Price + ' (' + value.BoxName + ')</td>';
initial_routename = value.Route;
}
if (key === (length - 1)) {
route_price_table += '</tr></thead><tbody>';
route_price_table += route_price_body_table + route_price_body_table2;
}
});
route_price_table += '</tbody></table>';
$('#route_price_table').html(route_price_table);
这可以使用jQuery来实现,还是我只需要将其安排在后端?任何帮助都将受到高度赞赏.
Can this be achieved using jQuery or do I need to just arrange it backend? Any help is highly appreciated.
推荐答案
您可以创建一个新数组,按Route对项目进行分组,将每个表行的所有信息都包含在单个对象中:
You can create a new array, grouping items by Route, having all info for each table row in a single object:
let data = [
{"Price": "10.00", "BoxName": "Small Box", "Route": "NCR/SLuz"},
{"Price": "15.00", "BoxName": "Small Box", "Route": "NLUZ/VisMin"},
{"Price": "20.00", "BoxName": "Small Box", "Route": "ISLANDS"},
{"Price": "25.00", "BoxName": "Small Box", "Route": "Indonesia"},
{"Price": "30.00", "BoxName": "Medium Box", "Route": "NCR/SLuz"},
{"Price": "35.00", "BoxName": "Medium Box", "Route": "NLUZ/VisMin"},
{"Price": "40.00", "BoxName": "Medium Box", "Route": "ISLANDS"},
{"Price": "45.00", "BoxName": "Medium Box", "Route": "Indonesia"},
{"Price": "50.00", "BoxName": "Large Box", "Route": "NCR/SLuz"},
{"Price": "55.00", "BoxName": "Large Box", "Route": "NLUZ/VisMin"},
{"Price": "60.00", "BoxName": "Large Box", "Route": "ISLANDS"},
{"Price": "65.00", "BoxName": "Large Box", "Route": "Indonesia"},
{"Price": "70.00", "BoxName": "Regular Box", "Route": "NCR/SLuz"},
{"Price": "75.00", "BoxName": "Regular Box", "Route": "NLUZ/VisMin"},
{"Price": "80.00", "BoxName": "Regular Box", "Route": "ISLANDS"},
{"Price": "85.00", "BoxName": "Regular Box", "Route": "Indonesia"},
{"Price": "90.00", "BoxName": "Very Big Box", "Route": "NCR/SLuz"},
{"Price": "95.00", "BoxName": "Jumbo Box", "Route": "NLUZ/VisMin"},
{"Price": "100.00", "BoxName": "Jumbo Box", "Route": "ISLANDS"},
{"Price": "105.00", "BoxName": "Another Box", "Route": "Indonesia"},
];
// .map to get just BoxName and .filter to get unique values
let boxes = data.map((obj) => obj.BoxName).filter((v, i, a) => a.indexOf(v) === i);
// Define a new object to reorder items
let nData = {};
// Loop on original array
$.each(data, (key, item) => {
// Check if exists current Route
if(!nData[item.Route]) {
// Initialize as empty object
nData[item.Route] = {};
}
// Assign Price to BoxName
nData[item.Route][item.BoxName] = item.Price;
});
// Now you can use boxes for table head and loop nData to build the table
console.log(boxes, nData);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
这篇关于使用jquery对表中的数据重新排序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!