wake-up-neo.net

Erstellen Sie eine dynamische HTML-Tabelle mit JavaScript aus einem einfachen Array

Ich möchte etwas JavaScript schreiben, um eine einfache HTML-Tabelle aus einem Array zu erstellen, das nur Zahlen enthält:

var array = [1,2,3,4,5,6,7,8,9,10];

Die Tabelle sollte so aussehen:

1 2 3 4 5
6 7 8 9 10

Der JavaScript-Code sollte jedoch abhängig von der Größe der Arrays dynamisch sein (allerdings immer ein Faktor von 5).

Ich habe viele Sachen ausprobiert, aber es funktioniert nie so, wie ich es will. Was wäre der einfachste Weg, dies zu erreichen?

Dies ist einer meiner Versuche.

var tableStart = "<table border>";
for (i = 0; i < arraySize/5; i++){
  var tableMiddle = "<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>"
  if (arraySize/5 >= 2) {
    tableMiddle = tableMiddle + tableMiddle;
  }
};
var tableEnd = "</table>";
var table = tableStart.concat(tableMiddle, tableEnd);

ebenso gut wie

var result = "<table border=1>";
for(var i=0; i<2; i++) {
    result += "<tr>";
    for(var j=0; j<array.length; j++){
        result += "<td>"+array[i]+"</td>";
    }
    result += "</tr>";
}
result += "</table>";

dies führt nur dazu, dass zwei Werte des Arrays oft angezeigt werden.

3
Alexander Hoerl

Sie könnten das Array iterieren und eine neue Zeile erstellen, wenn der Rest mit 5 Null ist.

var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    tr;

array.forEach((v, i) => {
    var td = document.createElement('td');
    
    if (!(i % 5)) {
        tr = document.createElement('tr');
        document.getElementById('table0').appendChild(tr);
    }
    td.appendChild(document.createTextNode(v));
    tr.appendChild(td);
});
<table id="table0"></table>

9
Nina Scholz

var array = [1,2,3,4,5,6,7,8,9,10];

var result = "<table border=1>";
result += "<tr>";
for (var j = 0; j < array.length; j++) {
  result += "<td>" + array[j] + "</td>";
  if ((j + 1) % 5 == 0) {
    result += "</tr><tr>";
  }
}
result += "</tr>";
result += "</table>";

document.body.innerHTML = result;

Bitte probieren Sie es aus, wenn das funktioniert 

0
Taylor Rahul

Wie wäre es mit so etwas? Erklärungen im Code. Nicht getestet, so müssen Sie möglicherweise einige Anpassungen vornehmen.

var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// start the table
var table = document.createElement("table");
var currentRow;
for (var i = 0; i < array.length; i++) {
  // put items in.
  var item = document.createElement("td");
  item.innerHTML = array[i];
  // if we are at the 
  if (i % 5 === 0) {
    // if it's not the first time you're creating row - first put the prev row into the table, then reassign it to a new table row.
    if (typeof currentRow !== 'undefined') table.appendChild(currentRow);
  currentRow.appendChild(item);

    currentRow = document.createElement("tr");
  }

}
// put the table into the body element, for example.
document.getElementsByTagName('body')[0].appendChild(table);
0
itamar