Erstellen dynamisch Tabelle mit 3 Spalten

Question

Ich habe Array von Objekten:

var arr = [{id:1, name:Mike },{id:2, name:Tom},{id:3, name:Herman}, 
      {id:4, name:Ursula},{id:5, name:Sam},{id:6, name:Jenny}, 
      {id:7, name:Helga},{id:8, name:Nikolas},{id:9, name:Surgen}, 
      {id:10, name:Jorg}] 

ich generieren müssen, um dynamisch Tabelle, die oben genannten Elemente in Array anzuzeigen. Die Tabelle sollte 3 Spalten und Zeilen entsprechend der Anzahl der Elemente im Array enthalten.

Zum Beispiel für arr oben Ich möchte meinen Tisch sein:

<div id="here_table"> 
    <table> 
      <tr><td>Mike</td><td>Tom</td><td>Herman</td></tr> 
      <tr><td>Ursula</td><td>Sam</td><td>Jenny</td></tr> 
     <tr><td>Helga</td><td>Nikolas</td><td>Surgen</td></tr> 
      <tr><td>Jorg</td><td>Empty</td><td>Empty</td></tr> 
    </table> 
</div> 

Oder wenn meine Array ist:

var arr = [{id:1, name:Mike },{id:2, name:Sam},{id:3, name:Herman}, 
      {id:10, name:Jorg},{id:2, name:Tom}] ; 

Der Tisch ist:

<div id="here_table"> 
    <table> 
      <tr><td>Mike</td><td>Sam</td><td>Herman</td></tr> 
      <tr><td>Jorg</td><td>Tom</td><td>Empty</td></tr> 
    </table> 
</div> 

Wie kann Ich implementiere Tabellen mit 3 Spalten und Zeilen entsprechend der Anzahl der Elemente im Array.

Answer 1

Berechnen Sie die Anzahl leerer Zellen, indem Sie das Array length durch 3 aufteilen, aufrunden und die length subtrahieren.

Iterate das Array eine for Schleife bis zum length des Arrays + Menge der leeren Zellen verwendet wird, und Hinzufügen eines neuen <tr>, wenn der Index gleich 0% 3 (der Index durch 3 teilbar ist).

var arr = [{"id":1,"name":"Mike"},{"id":2,"name":"Tom"},{"id":3,"name":"Herman"},{"id":4,"name":"Ursula"},{"id":5,"name":"Sam"},{"id":6,"name":"Jenny"},{"id":7,"name":"Helga"},{"id":8,"name":"Nikolas"},{"id":9,"name":"Surgen"},{"id":10,"name":"Jorg"}]; 
 
      
 
var table = $('<table>'); 
 
var tr; 
 
var empty = Math.ceil(arr.length/3) * 3 - arr.length; 
 
    
 
for(var i = 0; i < arr.length + empty; i++) { 
 
    i % 3 === 0 && (tr = $('<tr>').appendTo(table)); 
 
    
 
    tr.append('<td>' + (i < arr.length ? arr[i].name : 'empty') + '</td>'); 
 
} 
 

 
$('#here_table').append(table);

table { 
 
    border-collapse: collapse; 
 
} 
 

 
td { 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="here_table"></div>

Answer 2

Verwendung Modulo-Operator %

var arr = [{id:1, name:"Mike" },{id:2, name:"Tom"},{id:3, name:"Herman"}, 
 
      {id:4, name:"Ursula"},{id:5, name:"Sam"},{id:6, name:"Jenny"}, 
 
      {id:7, name:"Helga"},{id:8, name:"Nikolas"},{id:9, name:"Surgen"}, 
 
      {id:10, name:"Jorg"}]; 
 
var str = "<table>"; 
 
for(var i in arr){ 
 
    if(i%3==0) 
 
    str += "<tr>"; 
 
    str += "<td>"+arr[i].name+"</td>"; 
 
    if((i+1)%3==0) 
 
    str += "</tr>"; 
 
    
 
} 
 
str += "</table>"; 
 
document.querySelector("#here_table").innerHTML = str;

tr td{ 
 
    width:10%; 
 
}

<div id="here_table"> 
 
    
 
</div>

Answer 3

Erstellen Sie einfach eine JavaScript-Funktion die Tabelle erstellen

Hier verwende ich jQuery-Bibliothek, um das Element anzufügen, aber Sie können JavaScript auch direkt verwenden, um das Element hinzuzufügen.

// Object Array 
 
var arr = [ 
 
    { id: 1, name: "Mike" }, 
 
    { id: 2, name: "Tom" }, 
 
    { id: 3, name: "Herman" }, 
 
    { id: 4, name: "Ursula" }, 
 
    { id: 5, name: "Sam" }, 
 
    { id: 6, name: "Jenny" }, 
 
    { id: 7, name: "Helga" }, 
 
    { id: 8, name: "Nikolas" }, 
 
    { id: 9, name: "Surgen" }, 
 
    { id: 10, name: "Jorg" } 
 
]; 
 

 
// Generating the table creation HTML code 
 
function createTable(array) { 
 
    var tableString = "<table border='1'><tr>"; 
 
    var numOfCells = Math.ceil(arr.length/3)*3; 
 
    for (var i = 0; i < numOfCells; i++) { 
 
    if (array[i]) { 
 
     tableString += "<td>" + array[i].name + "</td>"; 
 
    } else { 
 
     tableString += "<td>Empty</td>"; 
 
    } 
 
    if ((i + 1) % 3 === 0) { 
 
     tableString += "</tr><tr>"; 
 
    } 
 
    } 
 
    tableString += "</tr></table>"; 
 
    return tableString; 
 
} 
 

 
// Appending that DOM element to the div 'here_table' 
 
$('#here_table').append(createTable(arr));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id=here_table></div>