我正在尝试下面的代码，但没有得到正确的输出
错误：
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<body>
<div class="container">
<div class="row">
<div class="accordion" id="accordionExample">
<table id="dataTable"class="table table-hover">
<thead>
<tr><th scope="col">item</th>
<th scope="col">vendor</th>
<th scope="col">Vendor Location</th>
<th scope="col">BU</th>
<th scope="col">Min Cost</th>
<th scope="col">Avg Cost </th>
<th scope="col">Max Cost </th>
<th scope="col">Total Quantity Sold</th></tr>
</thead>
</table>
</div>
<div class="pg-margin-auto">
<nav>
<ul class="pagination">
</ul>
</nav>
</div>
</div>
</div>
</body>
<script>
$(".table thead").css({"background":"#616264"});
$("#innertable thead").css({"background":"#616264 "});
$('th').css({"color":"#ffffff"});
$(".pagination").css({"margin-left":"200px"});
$("td").css({"display":"flex","justify-content":"space-between","margin-bottom":"25px"})
$("table").css({"border":"0","border-collapse":"separate", "border-spacing":"0 10px","margin-top":"0px","margin-bottom":"0px"});
$("td[colspan=8]").css({"padding":"0"});
$(".container").css({"background":"#f2f2f2"});
$("td[colspan=8]").css({"padding":"0","border-top-width":"0"});
$(".accordion").css("border-width","0");
$(".pg-margin-auto").css({"margin":"0 auto"});
$(".tab2").css({"margin-top": "0", "margin-bottom": "0" });
$(".tab2 td").css({"border-left": "0"});
$("#dataTable td").css({"border-left": "0"});
$(".spanId").css({"color":"#ffd700"});
$(".table .td").css({"vertical-align":"middle"})
var mydata = [
{
"item": "V400091-Amber Bottle Clear",
"vendor": "Alpha Packaging",
"vendor_location": "St. Louis, Mo",
"BU": 23,
"min_cost":"$0.06",
"avg_cost":"$0.09",
"max_cost":"$0.14",
"total_quantity_sold": "80,000,000",
},
{
"item": "V400091-Liquor BTL 500ML",
"vendor": "Berry Plastic",
"vendor_location": "Aurora, IL",
"BU": 23,"min_cost":"$0.06",
"avg_cost":"$0.06",
"max_cost":"$0.06",
"total_quantity_sold": "70,000,000",
"inner_data":[{"vendor_name": "Silgan",
"location": "Aurora, IL",
"last_purchase_date": "November 2, 2018",
"total_unit_purchased":"$0.06",
"product_info":[{"business_unit": "04-Kansas City",
"berlin_item": "V400091-Liquor BTL 500ML",
"last_purchase": "1000 pallets@$0.09",
"total_unit_purchased":"June 21,2017",
"average_unit_cost":"$0.14"},
{"Business Unit": "02-Dailas","berlin_item": "V400091-Liquor BTL 500ML","last_purchase": "1000 pallets@$0.09","total_unit_purchased":"June 21,2017","average_unit_cost":"$0.14"}
]},
{"vendor_name": "Alpha Packaging","location": "Aurora, IL","last_purchase_date": "January 12, 2018","total_unit_purchased":"$0.06"},
],
},
{
"item": "V400091-Liquor BTL 500ML","vendor": "Berry Plastic","vendor_location": "Aurora, IL","BU": 23,"min_cost":"$0.06","avg_cost":"$0.06","max_cost":"$0.06","total_quantity_sold": "70,000,000",
"inner_data":[{"vendor_name": "Berlin",
"location": "Aurora, IL",
"last_purchase_date": "November 2, 2018",
"total_unit_purchased":"$0.06",
"product_info":[{"business_unit": "04-Kansas City",
"berlin_item": "V400091-Liquor BTL 500ML",
"last_purchase": "1000 pallets@$0.09",
"total_unit_purchased":"June 21,2017",
"average_unit_cost":"$0.14"},
{"Business Unit": "02-Dailas","berlin_item": "V400091-Liquor BTL 500ML","last_purchase": "1000 pallets@$0.09","total_unit_purchased":"June 21,2017","average_unit_cost":"$0.14"}
]},
{"vendor_name": "Alpha Packaging","location": "Aurora, IL","last_purchase_date": "January 12, 2018","total_unit_purchased":"$0.06"},
],
},
{
"item": "V400091-Liquor BTL 500ML","vendor": "Berry Plastic","vendor_location": "Aurora, IL","BU": 23,"min_cost":"$0.06","avg_cost":"$0.06","max_cost":"$0.06","total_quantity_sold": "70,000,000",
"inner_data":[{"vendor_name": "Silgan",
"location": "Aurora, IL",
"last_purchase_date": "November 2, 2018",
"total_unit_purchased":"$0.06",
"product_info":[{"business_unit": "04-Kansas City",
"berlin_item": "V400091-Liquor BTL 500ML",
"last_purchase": "1000 pallets@$0.09",
"total_unit_purchased":"June 21,2017",
"average_unit_cost":"$0.14"},
{"Business Unit": "02-Dailas","berlin_item": "V400091-Liquor BTL 500ML","last_purchase": "1000 pallets@$0.09","total_unit_purchased":"June 21,2017","average_unit_cost":"$0.14"}
]},
{"vendor_name": "Alpha Packaging","location": "Aurora, IL","last_purchase_date": "January 12, 2018","total_unit_purchased":"$0.06"},
],
},
{
"item": "V400091-Liquor BTL 500ML","vendor": "Berry Plastic","vendor_location": "Aurora, IL","BU": 23,"min_cost":"$0.06","avg_cost":"$0.06","max_cost":"$0.06","total_quantity_sold": "70,000,000",
"inner_data":[{"vendor_name": "Silgan",
"location": "Aurora, IL",
"last_purchase_date": "November 2, 2018",
"total_unit_purchased":"$0.06",
"product_info":[{"business_unit": "04-Kansas City",
"berlin_item": "V400091-Liquor BTL 500ML",
"last_purchase": "1000 pallets@$0.09",
"total_unit_purchased":"June 21,2017",
"average_unit_cost":"$0.14"},
{"Business Unit": "02-Dailas","berlin_item": "V400091-Liquor BTL 500ML","last_purchase": "1000 pallets@$0.09","total_unit_purchased":"June 21,2017","average_unit_cost":"$0.14"}
]},
{"vendor_name": "Alpha Packaging","location": "Aurora, IL","last_purchase_date": "January 12, 2018","total_unit_purchased":"$0.06"},
],
},
{
"item": "V400091-Liquor BTL 500ML","vendor": "Berry Plastic","vendor_location": "Aurora, IL","BU": 23,"min_cost":"$0.06","avg_cost":"$0.06","max_cost":"$0.06","total_quantity_sold": "70,000,000",
"inner_data":[{"vendor_name": "Silgan",
"location": "Aurora, IL",
"last_purchase_date": "November 2, 2018",
"total_unit_purchased":"$0.06",
"product_info":[{"business_unit": "04-Kansas City",
"berlin_item": "V400091-Liquor BTL 500ML",
"last_purchase": "1000 pallets@$0.09",
"total_unit_purchased":"June 21,2017",
"average_unit_cost":"$0.14"},
{"Business Unit": "02-Dailas","berlin_item": "V400091-Liquor BTL 500ML","last_purchase": "1000 pallets@$0.09","total_unit_purchased":"June 21,2017","average_unit_cost":"$0.14"}
]},
{"vendor_name": "Alpha Packaging","location": "Aurora, IL","last_purchase_date": "January 12, 2018","total_unit_purchased":"$0.06"},
],
},
{
"item": "V400091-Liquor BTL 500ML","vendor": "Berry Plastic","vendor_location": "Aurora, IL","BU": 23,"min_cost":"$0.06","avg_cost":"$0.06","max_cost":"$0.06","total_quantity_sold": "70,000,000",
},
{
"item": "V400091-Liquor BTL 500ML","vendor": "Berry Plastic","vendor_location": "Aurora, IL","BU": 23,"min_cost":"$0.06","avg_cost":"$0.06","max_cost":"$0.06","total_quantity_sold": "70,000,000",
},
{
"item": "V400091-Liquor BTL 500ML","vendor": "Berry Plastic","vendor_location": "Aurora, IL","BU": 23,"min_cost":"$0.06","avg_cost":"$0.06","max_cost":"$0.06","total_quantity_sold": "70,000,000",
},
{
"item": "Bottle","vendor": "Pune","vendor_location": "NYC","BU": 13692,"min_cost":4000,"avg_cost":6000,"max_cost":8000,"total_quantity_sold": 500,
},
{
"item": "Bottle","vendor": "Pune","vendor_location": "NYC","BU": 13692,"min_cost":4000,"avg_cost":6000,"max_cost":8000,"total_quantity_sold": 500,
},
{
"item": "Bottle","vendor": "Pune","vendor_location": "NYC","BU": 13692,"min_cost":4000,"avg_cost":6000,"max_cost":8000,"total_quantity_sold": 500,
},
{
"item": "Bottle","vendor": "Pune","vendor_location": "NYC","BU": 13692,"min_cost":4000,"avg_cost":6000,"max_cost":8000,"total_quantity_sold": 500,
},
{
"item": "Bottle","vendor": "Pune","vendor_location": "NYC","BU": 13692,"min_cost":4000,"avg_cost":6000,"max_cost":8000,"total_quantity_sold": 500,
},
{
"item": "Bottle","vendor": "Pune","vendor_location": "NYC","BU": 13692,"min_cost":4000,"avg_cost":6000,"max_cost":8000,"total_quantity_sold": 500,
},
{
"item": "Bottle","vendor": "Pune","vendor_location": "NYC","BU": 13692,"min_cost":4000,"avg_cost":6000,"max_cost":8000,"total_quantity_sold": 500,
},
{
"item": "Bottle","vendor": "Pune","vendor_location": "NYC","BU": 13692,"min_cost":4000,"avg_cost":6000,"max_cost":8000,"total_quantity_sold": 500,
},
{
"item": "Bottle","vendor": "Pune","vendor_location": "NYC","BU": 13692,"min_cost":4000,"avg_cost":6000,"max_cost":8000,"total_quantity_sold": 500,
},
{
"item": "Bottle","vendor": "Pune","vendor_location": "NYC","BU": 13692,"min_cost":4000,"avg_cost":6000,"max_cost":8000,"total_quantity_sold": 500,
},
{
"item": "V400091-Liquor BTL 500ML","vendor": "Berry Plastic","vendor_location": "Aurora, IL","BU": 23,"min_cost":"$0.06","avg_cost":"$0.06","max_cost":"$0.06","total_quantity_sold": "70,000,000",
"inner_data":[ {"vendor_name": "Silgan",
"location": "Aurora, IL",
"last_purchase_date": "November 2, 2018",
"total_unit_purchased": "$0.06",
"product_info": [
{
"business_unit": "04-Kansas City",
"berlin_item": "V400091-Liquor BTL 500ML",
"last_purchase": "1000 pallets@$0.09",
"total_unit_purchased": "June 21,2017",
"average_unit_cost": "$0.14"
},
{
"business_unit": "02-Dailas",
"berlin_item": "V400091-Liquor BTL 500ML",
"last_purchase": "1000 pallets@$0.09",
"total_unit_purchased": "June 21,2017",
"average_unit_cost": "$0.14"
},
{
"business_unit": "23-Lock Port",
"berlin_item": "V400091-Liquor BTL 500ML",
"last_purchase": "1000 pallets@$0.09",
"total_unit_purchased": "June 21,2017",
"average_unit_cost": "$0.14"
}]
},
{"vendor_name": "Alpha Packaging","location": "Aurora, IL","last_purchase_date": "January 12, 2018","total_unit_purchased":"$0.06"},
{"vendor_name": "Berry Plastic","location": "Aurora, IL","last_purchase_date": "February 20, 2018","total_unit_purchased":"$0.06"},
]
},
{
"item": "V400091-Liquor BTL 500ML","vendor": "Berry Plastic","vendor_location": "Aurora, IL","BU": 23,"min_cost":"$0.06","avg_cost":"$0.06","max_cost":"$0.06","total_quantity_sold": "70,000,000",
},
{
"item": "V400091-Liquor BTL 500ML","vendor": "Berry Plastic","vendor_location": "Aurora, IL","BU": 23,"min_cost":"$0.06","avg_cost":"$0.06","max_cost":"$0.06","total_quantity_sold": "70,000,000",
},
{
"item": "V400091-Liquor BTL 500ML","vendor": "Berry Plastic","vendor_location": "Aurora, IL","BU": 23,"min_cost":"$0.06","avg_cost":"$0.06","max_cost":"$0.06","total_quantity_sold": "70,000,000",
"inner_data":[{"vendor_name": "Berlin",
"location": "Aurora, IL",
"last_purchase_date": "November 2, 2018",
"total_unit_purchased":"$0.06",
"product_info":[{"business_unit": "04-Kansas City",
"berlin_item": "V400091-Liquor BTL 500ML",
"last_purchase": "1000 pallets@$0.09",
"total_unit_purchased":"June 21,2017",
"average_unit_cost":"$0.14"},
{"Business Unit": "02-Dailas","berlin_item": "V400091-Liquor BTL 500ML","last_purchase": "1000 pallets@$0.09","total_unit_purchased":"June 21,2017","average_unit_cost":"$0.14"}
]},
{"vendor_name": "Alpha Packaging","location": "Aurora, IL","last_purchase_date": "January 12, 2018","total_unit_purchased":"$0.06"},
],
},
{
"item": "V400091-Liquor BTL 500ML","vendor": "Berry Plastic","vendor_location": "Aurora, IL","BU": 23,"min_cost":"$0.06","avg_cost":"$0.06","max_cost":"$0.06","total_quantity_sold": "70,000,000",
},
{
"item": "Glass",
"vendor": "Pune",
"vendor_location": "NYC",
"BU": 13692,
"min_cost":4000,
"avg_cost":6000,
"max_cost":8000,
"total_quantity_sold": 500,
},
]
$(function()
{
var totRows=mydata.length;
console.log(totRows);
var table_body='<tbody>';
for(i=0;i<totRows;i++)
{
// This is main table
table_body += `<tr id="td1" >
<td>
<a>
<span class="spanId"class="collapsed" data-parent="#accordionExample" aria-expanded="false" data-toggle="collapse" data-target="#innertable">⁺ </span>
</a>
<a href="#">${mydata[i]["item"]}</a>
</td>
<td><a href="#">${mydata[i]["vendor"]}</a></td>
<td>${mydata[i]["vendor_location"]}</td>
<td>${mydata[i]["BU"]}</td>
<td>${mydata[i]["min_cost"]}</td>
<td>${mydata[i]["avg_cost"]}</td>
<td>${mydata[i]["max_cost"]}</td>
<td>${mydata[i]["total_quantity_sold"]}</td>
</tr>`
//This is Table inside table
if(mydata[i].inner_data)
{
var len=mydata[i].inner_data.length;
table_body+=`<tr id="innerrow"class="collapse show">
<td colspan="8"><table class="table table-hover" id="innertable">
<thead><tr>
<th scope="col">Vendor Name</th>
<th scope="col">Location</th>
<th scope="col">Last Purchase Date</th>
<th scope="col">Total Unit Purchased</th>
</tr>
</thead>
<tbody>`
for(var j=0;j<len;j++)
{
table_body +=`<tr>
<td>
<a><span class="spanId"class="collapsed" data-parent="#accordionExample" aria-expanded="false" data-toggle="collapse" data-target="#producttable">⁺ </span></a><a href="#">${mydata[i].inner_data[j].vendor_name}</a>
</td>
<td>${mydata[i].inner_data[j].location}</td>
<td>${mydata[i].inner_data[j].last_purchase_date}</td>
<td>${mydata[i].inner_data[j].total_unit_purchased}</td>
</tr>`;
// This is Table inside inner table
if(mydata[i].inner_data[j].product_info)
{
var len1=mydata[i].inner_data[j].product_info.length;
table_body += `<tr id="productinfo"class="collapse show" >
<td colspan="8">
<table class="table table-hover" id="producttable">
<thead>
<tr>
<th scope="col">Business Unit</th>
<th scope="col">Berlin Item</th>
<th scope="col">Last Purchase</th>
<th scope="col">Total Unit Purchased</th>
<th scope="col">Average Unit Cost</th>
</tr>
</thead>
<tbody>`
for(var k=0;k<len1;k++)
{
table_body +=`<tr>
<td>${mydata[i].inner_data[j].product_info[k].business_unit}</td>
<td><a href="#">${mydata[i].inner_data[j].product_info[k].berlin_item}</a></td>
<td>${mydata[i].inner_data[j].product_info[k].last_purchase}</td>
<td>${mydata[i].inner_data[j].product_info[k].total_unit_purchased}</td>
<td>${mydata[i].inner_data[j].product_info[k].average_unit_cost}</td>
</tr>`;
}
table_body +='</tbody></table></td></tr>';
}
}
table_body +='</tbody></table></td></tr>';
}
}
table_body+='</tbody>';
$('#dataTable').append(table_body);
$('td > a').on('click', function() {
$(this).closest('tr').next().find('table:first').toggle();
});
var table='#dataTable'
var maxRows=20
var totalRows=$(table+' tbody tr').length
if(totalRows > maxRows)
{
$(table+' tr:gt(28)').hide();
var pagenum = Math.ceil(totalRows/maxRows)
for(var i=1;i<=pagenum;)
{
$('.pagination').append('<li class="page-item" data-page="'+i+'">\<a class="page-link">'+ i++ +'<span class="sr-only">(current)</span></a>\</li>').show();
}
}
$('.pagination li:first-child').addClass('active')
$('.pagination li').on('click',function()
{
var pageNum=$(this).attr('data-page')
var trIndex=0;
$('.pagination li').removeClass('active')
$(this).addClass('active')
$(table+' tr:gt(0)').each(function()
{
trIndex++
if(trIndex > (maxRows*pageNum) || trIndex <= ((maxRows*pageNum)-maxRows))
{
$(this).hide()
$('table table tr').show();
}
else
{
$(this).show()
}
});
});
});
</script>
预期输出：