0
134
VisualizaçõesMatriz multidimensional para tablas de arranque
Tenía una matriz multidimensional que consta de elementos dinámicos por subarreglo. Lo que estaba tratando de hacer era construir una tabla de arranque leyendo la matriz. Para explicar mejor el formato de la tabla: si mi matriz multidimensional es mdArray = [[name1, name2, name3, name4], [name5, name6, name7]] , quería crear una tabla de 4 columnas con mdArray[0], mdArray[1], mdArray[2], mdArray[3] y luego cree una nueva fila cuando se detecte el siguiente subarreglo con las columnas mdArray[4], mdArray[5], mdArray[6] . Lo que he probado está abajo. ¿Cómo puedo conseguir esto? Cualquier ayuda es apreciada. ¿Gracias por adelantado?
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/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script> <body> <table class="table table"> <tbody> </tbody> </table> </body> Porque alguien sugirió una representación visual: 
2 Respostas
Responde à pergunta0
¿Es esto lo que buscas?
<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/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" /> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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>0
Puede usar forEach loop y no necesita preocuparse por la cantidad de columnas y el manejo de índices de matriz
$('.table').ready(function() { var theTable = ""; mdArray.forEach((names) => { theTable += '<tr class="text-center">' names.forEach((name) => { theTable += `<td class="text-center">${name}</td>`; }) theTable += '</tr>' } ); $('.table').append(theTable); });