首頁猿問將重復數組分組到 td...

將重復數組分組到 td 并在表中創建新的 tr

JavaScript

阿波羅的戰車 2023-04-27 15:27:08

我正在工作一個小時，但我無法弄清楚。我想要的是將 fight_declaration 計數分組到新 tr，并將另一個 fight_declaration 合并到 td 而不是新 tr這是我想要實現的，但這只是一個例子 var json = ' [ { "fight_declaration": 1, "count": 2 }, { "fight_declaration": 3, "count": 1 } ]' var data = '' $.each(JSON.parse(json),function(key,val) { if(val.count > 1) { for(let i = 0; i < val.count; i++) { data += '<tr>' if(val.fight_declaration == 1) { data += '<td><span class="red-dot"></span></td>' } else if(val.fight_declaration == 2) { data += '<td><span class="blue-dot"></span></td>' } else if(val.fight_declaration == 3) { data += '<td><span class="green-dot"></span></td>' } else if(val.fight_declaration == 4) { data += '<td><span class="yellow-dot"></span></td>' } data += '</tr>' } } else { if(val.fight_declaration == 1) { data += '<td><span class="red-dot"></span></td>' } else if(val.fight_declaration == 2) { data += '<td><span class="blue-dot"></span></td>' } else if(val.fight_declaration == 3) { data += '<td><span class="green-dot"></span></td>' } else if(val.fight_declaration == 4) { data += '<td><span class="yellow-dot"></span></td>' } } }) $(".trend-table").find("tbody").html(data)但我的問題是它正在創建新的 tr 而不是我在上面的照片中想要的

查看完整描述

1 回答

慕容森

TA貢獻1853條經驗獲得超18個贊

由于您已經在表格中創建行并按行顯示，因此我認為您需要按列顯示它（轉置）。因此，一種解決方案是使用相等數量的列和行構建您的。trs然后將行中的數據顯示為列，反之亦然

maximum count在下面的代碼中，我首先從您的 json 數組中獲取了。然后，我減去所有 json 數組的max valuewith count，然后根據這個，我向該行附加了額外的 tds?，F在，您的表按行顯示，row并且columns

然后，我使用each循環遍歷trs之前生成的循環，并tds在新的trs最后刪除之前添加了所有內容trs。

下面的圖片將幫助您了解差異。

演示代碼：

var json = [{

"fight_declaration": 1,

"count": 2

{

"fight_declaration": 3,

"count": 4

{

"fight_declaration": 2,

"count": 6

{

"fight_declaration": 4,

"count": 6

}

]

var counts;

//loop through json arrays to get max count

for (var i = 0; i < json.length; i++) {

if (!counts || parseInt(json[i]["count"]) > parseInt(counts["count"]))

counts = json[i];

}

var data = '';

data += "<table>"

$.each(json, function(key, val) {

if (val.count > 1) {

data += '<tr>'

for (let i = 0; i < val.count; i++) {

add_colors(val.fight_declaration); //call function to color

}

//get extra tds to add in row..respect to max value

var new_count = counts.count - val.count

while (new_count > 0) {

//add extra tds

data += '<td></td>'

new_count--;

}

data += '</tr>'

} else {

add_colors(val.fight_declaration);

}

})

data += "</table>"

//loop through html generated

var datas = $(data).each(function() {

var $this = $(this);

var newrows = [];

//loop through rows

$this.find("tr").each(function() {

var i = 0;

//get tds

$(this).find("td").each(function() {

if (newrows[i] === undefined) {

newrows[i] = $("<tr></tr>");

}

newrows[i].append($(this));

i++;

});

//remove previous trs

$this.find("tr").remove();

//add new trs

$.each(newrows, function() {

$this.append(this);

});

//add value to the table

$("table.trend-table").html($(datas).html())

function add_colors(values) {

if (values == 1) {

data += '<td><span class="red-dot">R</span></td>'

} else if (values == 2) {

data += '<td><span class="blue-dot">B</span></td>'

} else if (values == 3) {

data += '<td><span class="green-dot">G</span></td>'

} else if (values == 4) {

data += '<td><span class="yellow-dot">Y</span></td>'

}

.red-dot {

background-color: red;

}

.blue-dot {

background-color: blue;

}

.green-dot {

background-color: green;

}

.yellow-dot {

background-color: yellow;

}

</table>

反對回復 2023-04-27

1 回答
0 關注
133 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

將重復數組分組到 td 并在表中創建新的 tr

將重復數組分組到 td 并在表中創建新的 tr

1 回答

添加回答