Handle rowspan und colspan beim Konvertieren von "Tabelle" in "Div" - javascript, jquery, html, css

Ich konvertiere tabellarisch strukturierte Daten mit dem folgenden Code in div.

$("#content").html($("#content").html()
.replace(/<tbody/gi, "<div id="table"")
.replace(/<tr/gi, "<div style="overflow:auto;padding-top:15px;"")
.replace(/</tr>/gi, "</div>")
.replace(/<td/gi, "<span  style="float:left;margin-right:20px;"")
.replace(/</td>/gi, "</span>")
.replace(/</tbody/gi, "</div"));

Es funktioniert meistens in allen Szenarien mit Ausnahme von ROWSPAN & COLSPAN.

Wie kann ich mit diesem Designproblem umgehen, während ich Tabelle in Div konvertiere? Ich stecke darin fest.

Antworten:

5 für die Antwort № 1

Vielleicht bringt Sie das in die richtige Richtung:

.replace(/rowspan="/gi, "class="rowspan-")
.replace(/colspan="/gi, "class="colspan-")

Erstellen Sie dann Stile für die Klassen (z. B. rowspan-2 oder colspan-3 usw.). Dies löst jedoch nicht Fälle, in denen ein Element sowohl Zeilen- als auch Spaltenbreite hat, sondern es ist ein Anfang.

Ein besserer Weg wäre:

var copyAttr = function(old, $new) {
for(var i = 0,
attributes = old.attributes;
i < attributes.length; i++) {

$new.attr(attributes[i].name, attributes[i].value);
}
return $new;
}

$("#content").find("tbody").each(function() {
var $new = copyAttr(this, $("<div id="table"></div>");
$(this).replaceWith($new);
}).end().find("tr").each(function() {
var $new = copyAttr(this, $("<div class="tr"></div>");
$(this).replaceWith($new);
}).end().find("td").each(function() {
var $new = copyAttr(this, $("<span class="td"></span>");
$(this).replaceWith($new);
});

Jetzt haben Sie die gesamte Tabellenstruktur durch divs und spans mit allen Attributen der Tabellenelemente ersetzt. Als nächstes können Sie die Zeilen- und Spaltenattribute in Klassen ändern.

$("#table .td").each(function() {
var $t = $(this);
$t
.addClass("rowspan-"+$t.attr("rowspan"))
.removeAttr("rowspan")
.addClass("colspan-"+$t.attr("colspan"))
.removeAttr("colspan");
});

---

1 für die Antwort № 2

Warum konvertieren Sie tabellenstrukturierte Daten in div, anstatt zunächst nur div-strukturierte Daten auszugeben? Ich verstehe das nicht wirklich

Sie können versuchen, CSS zu verwenden:

.tablewrapper
{
position: relative;
}
.table
{
display: table;
}
.row
{
display: table-row;
}
.cell
{
display: table-cell;
border: 1px solid red;
padding: 1em;
}
.cell.empty
{
border: none;
width: 100px;
}
.cell.rowspanned
{
position: absolute;
top: 0;
bottom: 0;
width: 100px;
}

Einige Beispieltabellen, die Sie bekommen sollten:

<div class="tablewrapper">
<div class="table">
<div class="row">
<div class="cell">
Top left
</div>
<div class="rowspanned cell">
Center
</div>
<div class="cell">
Top right
</div>
</div>
<div class="row">
<div class="cell">
Bottom left
</div>
<div class="empty cell"></div>
<div class="cell">
Bottom right
</div>
</div>
</div>
</div>

In Ihrem Fall wird dies so aussehen:

.replace(/rowspan="/gi, "class="rowspanned cell")

Dieses Beispiel funktioniert in allen gängigen Browsern mit Ausnahme von Internet Explorer 7.

---