我有一个多维数组，每个子数组由动态元素组成。我想做的是通过读取数组来构建引导表。为了更好地解释表格格式:如果我的多维数组是 mdArray = [[name1, name2, name3, name4], [name5, name6, name7]]
我想创建一个包含 mdArray[0]、mdArray[1]、mdArray[2]、mdArray[3] 的 4 列表，然后在使用列检测到下一个子数组时创建一个新行mdArray[4]、mdArray[5]、mdArray[6]。我尝试过的如下。我怎样才能实现这个目标？任何帮助表示赞赏。提前致谢？
mdArray = [
['name1', 'name2', 'name3', 'name4'],
['name5', 'name6', 'name7']
]
$('.table').ready(
function() {
console.log('table loaded');
var theTable = "";
for (var j = 0; j < mdArray.length; j++) {
theTable += '<tr class="text-center">';
for (var k = 0; k < 2; k++) {
theTable += '<td> class="text-center"' + mdArray[k][j] + '</td>';
}
theTable += '</tr>';
}
$('.table').append(theTable);
//expected name1 name2 name3 name4
//next row
//name5 name6 name7
});<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="26444949525552544756661308170815" rel="noreferrer noopener nofollow">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2c4e4343585f585e4d5c6c19021d021f" rel="noreferrer noopener nofollow">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<body>
<table class="table table">
<tbody>
</tbody>
</table>
</body>因为有人建议使用视觉表示:
最佳答案
这就是你要找的吗
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b8dad7d7cccbcccad9c8f88d9689968b" rel="noreferrer noopener nofollow">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3d5f5252494e494f5c4d7d08130c130e" rel="noreferrer noopener nofollow">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</head>
<body>
<!-- <button onclick="eventEmitArray()">Insert the array</button> -->
<table class="table">
<tbody></tbody>
</table>
</body>
<script>
let mdArray = [
["name1", "name2", "name3", "name4"],
["name5", "name6", "name7"],
];
$(".table").ready(function() {
console.log("table loaded");
var theTable = "";
for (var j = 0; j < mdArray.length; j++) {
theTable += '<tr class="text-center">';
for (var k = 0; k < mdArray[j].length; k++) {
theTable += '<td class="text-center">' + mdArray[j][k] + "</td>";
}
theTable += "</tr>";
}
$(".table").append(theTable);
});
</script>
</html>关于javascript - 多维数组到引导表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69971510/