Ich habe eine Reihe von Elementen, die ich in eine HTML-Tabelle einfügen möchte:

var tags_arr = [1,2,3,4,5,6,7,8,9,10,12,13,14,15,16,17,18,19];

Ich kann eine HTML-Tabelle erstellen, indem ich einfach jede 4. Iteration beginnende <tr> Tags platziere:

var checks = "<table border=1>";

for (var c = 0; c < tags_arr.length; c++){



    if (c%4 == 0){

         checks += "<tr>";

    }

    checks += "<td>" + tags_arr[c] + "</td>";

}

checks += "</table>";
$("body").append(checks);

JSBIN

Diese Lösung basiert jedoch darauf, dass der Browser das schließende <\tr> -Tag einfügt, wenn er das neue öffnende Tag "sieht". Dem Browser scheint es auch egal zu sein, dass die letzte Zeile weniger <td> Zellen enthält als die vorherigen Zeilen.

Es funktioniert, aber es gibt eine Möglichkeit, dies zu erweitern, um sich nicht vollständig auf den Browser zu verlassen. Ich habe versucht, sie mit einem regulären Ausdruck in den String einzufügen, aber es scheint, dass es eine Möglichkeit geben sollte, dies in der Schleife zu tun. Ist es machbar? Oder kann ich mich einfach auf Chrome und Firefox verlassen, um die Bereinigung für mich durchzuführen, da dies nur in modernen Browsern funktionieren muss?

BEARBEITEN:

Hacky Regex Weg:

checks = checks.replace(/(<tr>)/g, "</tr><tr>").replace(/<\/tr>/, "");

checks += "</tr></table>";
0
1252748 6 Dez. 2013 im 19:59

5 Antworten

Beste Antwort

Die HTML5-Spezifikation explizit besagt, dass das Schließen von {nicht erforderlich ist Tags {X0}} und <td> in den offensichtlichen Szenarien:

  • Es ist nicht erforderlich, ein <td> vor dem nächsten <td> oder <tr> oder Tabellenblockabschnitt (<tbody>, <tfoot>) oder dem </table> Schließen zu schließen Etikett.
  • Es ist nicht erforderlich, ein <tr> vor dem nächsten Schließen von <tr>, Blockabschnitten oder Tabellen zu schließen.

Ich bezweifle ernsthaft, dass Sie auf moderne Browser stoßen, die hier nicht das Richtige tun. Ich wette sogar IE6 wird es richtig machen.

1
Pointy 6 Dez. 2013 im 22:23
for (var c = 0; c < tags_arr.length; c++){
    if (c%4 == 0){
        if (c > 0) {
            checks += "</tr>";
        }
        checks += "<tr>";
    }
    checks += "<td>" + tags_arr[c] + "</td>";
}
if (c > 0) { // Don't add a closing tag if there were no rows at all
    checks += "</tr>";
}
0
Barmar 6 Dez. 2013 im 16:04
var cell = 0, len = tags_arr.length;
for(var row = 0; cell < len; row++) {
    checks += '<tr>';
    for(var col = 0; col < 4 && cell < len; col++, cell++)
        checks += '<td>' + tags_arr[cell] + '</td>'; 
    checks += '</tr>';
}

Die richtige Lösung - keine Unterteilungen, keine Ausnahmefälle, kein zusätzlicher Speicher.

0
Karolis Juodelė 6 Dez. 2013 im 16:22

Sie können das TR-Abschluss-Tag einfach anhängen, bevor Sie das Start-TR-Tag anhängen:

for (var c = 0; c < tags_arr.length; c++){
    if (c%4 == 0){
         if (c !== 0) checks +="</tr>";
         checks += "<tr>";
    }
    checks += "<td>" + tags_arr[c] + "</td>";
}

checks += "</tr></table>";

PS: Kümmere dich um die Randfälle.

BEARBEITEN: Eine elegantere Lösung besteht darin, die Elemente vorab in Arrays zu verteilen:

var distributed = [];
var tags_arr = [1,2,3,4,5,6,7,8,9,10,12,13,14,15,16,17,18,19];
while(tags_arr.length > 0) {
  distributed.push(tags_arr.splice(0,4));
}

Und dann verwenden Sie einige intelligente Schleifen, um das HTML zu erstellen:

var html = distributed.reduce(function(html, item){ 
  var td = item.reduce(function(html, item){
    return html + '<td>' + item + '</td>';
  }, '');
  return html + '<tr>' + td + '</tr>';
}, '');

html = '<table border=1>' + html + '</table>';
1
Tibos 6 Dez. 2013 im 16:12

Schließen Sie einfach das tr-Tag, bevor Sie eines öffnen. Wenn c == 0, wurde noch kein Tag geöffnet. Vergessen Sie nicht, das letzte Tag nach der for-Schleife zu schließen

var checks = "<table border=1>";

for (var c = 0; c < tags_arr.length; c++){



    if (c%4 == 0){
         if (c > 0)
            checks += "</tr>"
         checks += "<tr>";

    }

    checks += "<td>" + tags_arr[c] + "</td>";

}
if (tags_arr.length > 0)
    checks += "</tr>"
0
EoiFirst 6 Dez. 2013 im 16:14