Aufbau einer Tabelle über mehrere Zeilen, wobei die Anzahl der TDs begrenzt bleibt?

Question

Ich baue eine Tabelle auf, die aus zwei Zeilen besteht. Die erste Zeile enthält ein Bild, die zweite Zeile enthält den zugehörigen Text.

Erst jetzt erkenne ich, dass ich "max Spalte" irgendeiner Art pro Zeile haben muss.

Allerdings bin ich nicht in der Lage, einen Weg zu finden, um diese Variable max zu implementieren (Ich versuchte einen Haufen, wie eine while-Schleife und wie die Zählung bisher verfolgt).

var max = 5 //needs to be flexible 
var tr = document.createElement("tr"); 

for (var i = 0; i < this.structures.length; i++){ //image row 
    var td = document.createElement("td"); 
    var img = new Image() 
     td.appendChild(img);    
    tr.appendChild(td); 
} 
table.appendChild(tr); 


var tr = document.createElement("tr"); 

for (var i = 0; i < this.structures.length; i++){ // text row 
    var td = document.createElement("td"); 
     td.innerHTML = "bla" 
} 
table.appendChild(tr); 

Kann jemand beraten?

Answer 1

Wenn Sie sagen, dass Sie tatsächlich mehr als zwei Zeilen benötigen, um Bilder größer als das Maximum aufzunehmen, erstellen Sie einfach zwei weitere, wenn der Wert i gleichmäßig durch Ihr Maximum teilbar ist.

Auch ist es wahrscheinlich eine gute Idee, separate tbody Elemente zu verwenden, da Sie eine Gruppierung erstellen, die wahrscheinlich als solche abgerufen werden muss.

var structures = [ 
 
    {text: "red", src: "http://dummyimage.com/100/f00" 
 
}, {text: "blue", src: "http://dummyimage.com/100/00f" 
 
}, {text: "green", src: "http://dummyimage.com/100/0f0" 
 
}, {text: "red", src: "http://dummyimage.com/100/f00" 
 
}, {text: "blue", src: "http://dummyimage.com/100/00f" 
 
}, {text: "green", src: "http://dummyimage.com/100/0f0" 
 
}, {text: "red", src: "http://dummyimage.com/100/f00" 
 
}, {text: "blue", src: "http://dummyimage.com/100/00f" 
 
}, {text: "green", src: "http://dummyimage.com/100/0f0" 
 
}, {text: "red", src: "http://dummyimage.com/100/f00" 
 
}, {text: "blue", src: "http://dummyimage.com/100/00f" 
 
}, {text: "green", src: "http://dummyimage.com/100/0f0" 
 
}]; 
 

 
var max = 5; 
 
var table = document.querySelector("#t"); 
 
var tbody, tr1, tr2; 
 

 
for (var i = 0; i < structures.length; i++) { 
 
    if (i % max === 0) { 
 
    tbody = table.appendChild(document.createElement("tbody")); 
 
    tr1 = tbody.insertRow(-1); 
 
    tr2 = tbody.insertRow(-1); 
 
    } 
 
    tr1.insertCell(-1).appendChild(new Image()).src = structures[i].src; 
 
    tr2.insertCell(-1).textContent = i + ": " + structures[i].text; 
 
}

<table id=t></table>

Answer 2

Hier ist ein Beispiel, die Zeilen der Tabelle durch den Inhalt

ich verwendet habe ein Array nach Bedarf ergänzt row_set

var row_set = []; Es speichert alle die Reihen der Tabelle.

Und innerhalb der for-Schleife rief ich eine Funktion getRows(), die mir ein Array von zwei Zeilen, um Daten hinzuzufügen.

getRows unterhalb

gezeigt Es hat zwei Parameter current und row.

current ist der aktuelle Index und max ist das Maximum.

function getRows(current,max){ 
    if(current%max === 0){ 
    row_set.push(table.insertRow(-1)); 
    row_set.push(table.insertRow(-1)); 
    } 

    return row_set; 
} 

Es gibt ein Array von zwei Nachrichten Reihen, wenn current von max geteilt wird oder sonst gibt die letzte Reihe von Zeilen.

Jetzt, Pop die zwei Zeilen und fügen Sie Ihre Daten hinzu.

tr2= rows.pop(); 
tr1= rows.pop(); 

Nachdem die Daten in den Tabellen Hinzufügen schieben die zuletzt verwendeten Zeilen in dem row_set Array.

rows.push(tr1); 
rows.push(tr2); 

var structures = [ 
 
    {text: "red", src: "http://dummyimage.com/100/f00" 
 
}, {text: "blue", src: "http://dummyimage.com/100/00f" 
 
}, {text: "green", src: "http://dummyimage.com/100/0f0" 
 
}, {text: "red", src: "http://dummyimage.com/100/f00" 
 
}, {text: "blue", src: "http://dummyimage.com/100/00f" 
 
}, {text: "green", src: "http://dummyimage.com/100/0f0" 
 
}, {text: "red", src: "http://dummyimage.com/100/f00" 
 
}, {text: "blue", src: "http://dummyimage.com/100/00f" 
 
}, {text: "green", src: "http://dummyimage.com/100/0f0" 
 
}, {text: "red", src: "http://dummyimage.com/100/f00" 
 
}, {text: "blue", src: "http://dummyimage.com/100/00f" 
 
}, {text: "green", src: "http://dummyimage.com/100/0f0" 
 
}]; 
 

 
var max = 5; 
 
var table = document.querySelector("#t"); 
 
var tr1, tr2; 
 
    
 
var row_set = []; 
 

 
for (var i = 0; i < structures.length; i++){ 
 
    
 
    var rows = getRows(i,max); 
 
    
 
    tr2= rows.pop(); 
 
    tr1= rows.pop(); 
 
    
 
    tr1.appendChild(document.createElement("td")) 
 
    .appendChild(new Image()) 
 
    .src = structures[i].src; 
 
    
 
    tr2.appendChild(document.createElement("td")) 
 
    .textContent = structures[i].text; 
 
    
 
    rows.push(tr1); 
 
    rows.push(tr2); 
 
} 
 

 

 

 
function getRows(current,max){ 
 
    if(current%max === 0){ 
 
    row_set.push(table.insertRow(-1)); 
 
    row_set.push(table.insertRow(-1)); 
 
    } 
 
    
 
    return row_set; 
 
}

<table id=t></table>