希望實作：
目前代碼：
var data = [{"NAME":"A","Lei":[{"ID":"A1"},{"ID":"A2"},{"ID":"A3"},{"ID":"A4"},{"ID":"A5"},{"ID":"A6"}]},
{"NAME":"B","Lei":[{"ID":"B1"},{"ID":"B2"},{"ID":"B3"},{"ID":"B4"},{"ID":"B5"},{"ID":"B6"}]}];
var s = 0;
var U = 0;
var ONELie = 2;
var TOWLie = 5;
var SU = "<table border='1' width='100%'>"
SU += "<tr align='center'>"
for(var i = 0;i < data.length; i++){
if(++s%ONELie == 1){ SU += "</tr><tr align='center'>";}
SU += "<td height='40' colspan='" + TOWLie +"'><b>" + data[i].NAME + "</b></td>";
}
SU += "</tr><tr align='center'>"
/**/
for(var i = 0;i < data.length; i++){
//------------------------------------------------------------------------------------------------
for(var K = 0;K < data[i].Lei.length; K++){
if(++U%TOWLie*ONELie == 1){
SU += "</tr><tr align='center'>";
}
SU += "<td align='center'>" + data[i].Lei[K].ID + "</td>";
}
//------------------------------------------------------------------------------------------------
SU += "</tr>"
}
SU += "</table>"
$("#tite").append(SU);
以上執行始終不能按列歸類，請各位幫忙看看，謝謝！
uj5u.com熱心網友回復：
什么意思，文字表達清楚點。uj5u.com熱心網友回復：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box"></div>
<script src="https://bbs.csdn.net/topics/jquery-3.3.1.js"></script>
<script>
$(function() {
var data = [
{"NAME":"A","Lei":[{"ID":"A1"},{"ID":"A2"},{"ID":"A3"},{"ID":"A4"},{"ID":"A5"},{"ID":"A6"}]},
{"NAME":"B","Lei":[{"ID":"B1"},{"ID":"B2"},{"ID":"B3"},{"ID":"B4"},{"ID":"B5"},{"ID":"B6"},{"ID":"B7"}]},
{"NAME":"C","Lei":[{"ID":"C1"},{"ID":"C2"},{"ID":"C3"},{"ID":"C4"},{"ID":"C5"},{"ID":"C6"},{"ID":"C7"}]},
];
var colNum = 3;
var html = "<table border='1' width='100%'><tr align='center'>";
data.forEach(item => {
html += "<td height='40' colspan='" + colNum +"'><b>" + item.NAME + "</b></td>";
});
html += "</tr><tr align='center'>";
var rowNum = 0;
data.forEach(group => {
rowNum = group.Lei.length / colNum > rowNum ? Math.ceil(group.Lei.length / colNum) : rowNum;
});
for (var i = 0; i < rowNum; i++) {
html += "<tr align='center'>";
data.forEach(item => {
for (var j = 0; j < colNum; j++) {
html += "<td>" + (item.Lei[i * colNum + j] ? item.Lei[i * colNum + j].ID : "") + "</td>";
}
});
html += "</tr>";
}
html += "</table>"
$("#box").append(html);
});
</script>
</body>
</html>
這種方式 我覺得很不簡便
uj5u.com熱心網友回復：
謝謝nian_cj，但有一句不明白，請問“group.Lei.length / colNum > rowNum ? Math.ceil(group.Lei.length / colNum) : rowNum;”是啥意思？uj5u.com熱心網友回復：
三元運算式 運算式 ? 運算式為true 的值 : 為false 的值轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/62613.html
標籤：JavaScript
上一篇：求從1加到n