javascript - 使用 JavaScript 调整 td 或 tr 位置
问题描述
我这里有一个演示 JsFiddle。
我创建了一个表并从数据库中获取数据并放入一个数组中。我想要的是根据供应商名称(参见演示)动态填充表格单元格。所以我似乎找不到/尝试任何解决方案。
这是我的数组数据:
var a = [
{
"supplier_name": "Glory",
"total_amount":[5000, 1000],
"unit_price":[2,200]
},
{
"supplier_name": "Midtown",
"total_amount":[10000, 1500],
"unit_price":[4,300]
},
{
"supplier_name": "Tower General",
"total_amount":[7500, 500],
"unit_price":[3,100]
}
];
解决方案
您应该找到 tr 行,然后附加数据。
jQuery.each(trs, function(index, row){
tr = '';
jQuery.each(row, function(index, value){
tr += '<td>'+value+'</td>'
})
var row = jQuery("#pricing > tbody tr")[index];
jQuery(row).append(tr);
})
var a = [
{
"supplier_name": "Glory",
"total_amount":[5000, 1000],
"unit_price":[2,200]
},
{
"supplier_name": "Midtown",
"total_amount":[10000, 1500],
"unit_price":[4,300]
},
{
"supplier_name": "Tower General",
"total_amount":[7500, 500],
"unit_price":[3,100]
}
];
console.clear();
trs = [];
// verify all has names and equal length of unit_price and total_amount
lengthOfUnitPrice = 0;
for(var i = 0; i< a.length; i++){
b = a[i];
if(!b.hasOwnProperty('supplier_name') || !b.supplier_name) {
b.supplier_name = "";
}
if(!b.hasOwnProperty('unit_price') || !b.unit_price.length) {
b.unit_price = [];
}
if(!b.hasOwnProperty('total_amount') || !b.total_amount.length) {
b.total_amount = [];
}
if(lengthOfUnitPrice < b.unit_price.length){
lengthOfUnitPrice = b.unit_price.length;
}
}
// verify all unit_price and total_amount are of equal length, if not pad empty string or -
for(var i = 0; i< a.length; i++){
b = a[i];
toPad = lengthOfUnitPrice - b.unit_price.length;
for(var j = 0; j< toPad; j++){
b.unit_price.push("");
}
toPad = lengthOfUnitPrice - b.total_amount.length;
for(var j = 0; j< toPad; j++){
b.total_amount.push("");
}
}
// Collect values in array of array
supplier_names = a.map((b) => b.supplier_name);
trs = [];
for(var i = 0; i < lengthOfUnitPrice; i++){
temp = [];
for(var j =0; j < a.length; j++){
b =a[j];
temp.push(b.unit_price[i]);
temp.push(b.total_amount[i])
}
trs.push(temp);
}
//console.log(jQuery("#pricing > tbody tr"));
jQuery.each(trs, function(index, row){
tr = '';
jQuery.each(row, function(index, value){
tr += '<td>'+value+'</td>'
})
var row = jQuery("#pricing > tbody tr")[index];
jQuery(row).append(tr);
})
//jQuery("#pricing > tbody ").append(tr);
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="pricing" class="table table-striped table-bordered">
<thead>
<tr>
<th></th>
<th></th>
<th colspan='2'>Glory</th>
<th colspan='2'>Midtown</th>
<th colspan='2'>Tower General</th>
</tr>
<tr>
<th>Item</th>
<th>Qty</th>
<th>Price</th>
<th>Total</th>
<th>Price</th>
<th>Total</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr class="tbody-tr">
<td>Apple</td>
<td>2500</td>
</tr>
<tr class="tbody-tr">
<td>Banana</td>
<td>5</td>
</tr>
</tbody>
</table>
推荐阅读
- sonarqube - Java 1.8.0_221 的“SonarQube 需要 Java 11+ 才能运行”
- r - 使用 R 抓取应用程序评论:xpath 问题
- sql - 我应该使用什么操作以正确的方式组织数据,我相信它可能是子查询
- nginx - 如果是 403 或 404,则重定向到单独的 URL
- javascript - 企业领导不展示
- android - 基于第一个活动微调器选择的第二个活动微调器显示
- json - 将 JSON 字符串转换为 [String: Any] 类型的字典作为参数传入 Alamofire 请求
- python - 如何在 QListWidget 中按文本设置所选项目?
- c - C - “从“int*”到“int”的无效转换
- java - 罐子内的 NoClassDefFoundError