nicht angemeldet
Mit insertRow und insertCell (bzw über innerHTML) angefügte Zeilen (contenteditable) ohne Text haben keine Höhe und sind nicht auswählbar. Warum? Wie ändern?
Matthias Apsel
Rolf B
Gunnar BittersmannMit insertRow und insertCell (bzw über innerHTML) angefügte Zeilen (contenteditable) ohne Text haben keine Höhe und sind nicht auswählbar. Warum? Wie ändern?
Hallo! Im angefügten Beispiel hat leider die zuerst neu angefügte Tabellenzeile keine Höhe. Sie ist auch nicht auswählbar mittels der Pfeiltasten, wenn der Cursor in einer der auswählbaren Tabellenzellen steht.
Wie bekomme ich es hin, dass die neue Zeile, die jedoch keinen Text hat, trotzdem die "normale" Höhe hat und auswählbar ist? ("Normal" insofern, als das im tatsächlichen Programm die Tabelle nach dem body onload event erst mittels .innerHTML eingefügt wird, und dabei die leeren Zeilen alle eben eine einfache Höhe haben und auswählbar sind.)
<html><head>
<style type="text/css">
table,td { border: 1px solid black; }
.myTable { border: 1px solid black; border-collapse: collapse; text-align: center; }
.myTable td { padding:0px; border-spacing:0px; }
</style>
<script>
function addRow() {
var t = document.getElementById('t');
var newRow = t.insertRow(); var newCell;
newRow.innerHTML = '<td></td><td></td><td></td><td></td>';
newRow = t.insertRow();
newRow.innerHTML = '<td>three</td><td></td><td></td><td></td>';
}
</script>
</head>
<body onload="addRow()">
<table id="t" class="myTable" style="width:99%;" contenteditable="true">
<tr><td>one</td><td></td><td></td><td></td></tr>
</table>
</body>
</html>
-
P.S. Den Trick z.B. einzufügen möchte ich eher nicht verwenden, denn wie soll ich dann anschließend zwischen der Nutzereingabe bei der editierbaren Tabelle und der als Notbehelf eingefügten Leerzeichen unterscheiden?
Außerdem möchte ich auch wirklich wissen, warum das Ergebnis mit den leeren Zeilen so ist, wie es ist, und wie ich sozusagen im Sinne der HTML-Spezifikation das löse.
Wenn ich die editierbare Tabelle verwenden kann, wäre es halt viel einfacher und hoffentlich weniger Fehleranfällig, als wenn ich zwei, drei Hilfsfunktionen schreiben würde, um insertRow und insertCell und das einfache Speichern des Inhalts mittels innerHTML oder outerHTML zu umgehen.
-
P.S. Muss mich korrigieren: Wenn ich die Tabelle als ganzes mittels outerHTML einfüge, haben da schon leere Zeilen keine Höhe. ):
-
-
Nach weiterem rumprobieren viel mir auf, dass Firefox höchselbst irgendwann - wahrscheinlich als die Tabelle noch als Platzhalter bereits im html-Text stand -
<br>in die leeren Tabellenzellen eingefügt hat.Und ich glaube mich zu erinnern, vor einer ganzen Reihe von Jahren genau zu dem Thema leere Zellen und wie sich die Browser dabei verhalten sollen, gelesen zu haben, dass man die Zellen irgendwie füllen muss.
<br>geht für mich sehr gut. ( wäre nicht gegangen.)-
Hi there,
Nach weiterem rumprobieren viel mir auf, dass Firefox höchselbst irgendwann - wahrscheinlich als die Tabelle noch als Platzhalter bereits im html-Text stand -
<br>in die leeren Tabellenzellen eingefügt hat.Naja, das ist auch nicht viel besser als
Und ich glaube mich zu erinnern, vor einer ganzen Reihe von Jahren genau zu dem Thema leere Zellen und wie sich die Browser dabei verhalten sollen, gelesen zu haben, dass man die Zellen irgendwie füllen muss.
Ja, das war vor ca. 20 Jahren, daß leere Tabellenzellen in manchem Browser nicht richtig dargestellt wurden.
<br>geht für mich sehr gut. ( wäre nicht gegangen.)Du hättest den Tabellenzellen auch einfach eine Höhe geben können. Du hast den Zellen mit padding:0 aber einfach mitgeteilt, daß es keinen Innenabstand gibt. Ein schlichtes "height:irgendeine_Höhe" hätte das gleiche und vor allem "de lege artis" bewirkt...;)
-
Hallo UA,
Und ich glaube mich zu erinnern, vor einer ganzen Reihe von Jahren genau zu dem Thema leere Zellen und wie sich die Browser dabei verhalten sollen, gelesen zu haben, dass man die Zellen irgendwie füllen muss.
<br>geht für mich sehr gut. ( wäre nicht gegangen.)Es gibt die CSS-Eigenschaft empty-cells.
Bis demnächst
Matthias--
Du kannst das Projekt SELFHTML unterstützen,
indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt. -
Hallo UA,
Im angefügten Beispiel hat leider die zuerst neu angefügte Tabellenzeile keine Höhe.
Sie hat nicht nur keine Höhe sondern laut Entwicklertools eine Höhe von -1px.
<br>geht für mich sehr gut. ( wäre nicht gegangen.)Das gewünschte Aussehen mithilfe von Inhalten zu steuern halte ich für keine gute Idee.
empty-cellsist allerdings nicht zielführend. Aber die Vergabe einer festen Höhe im CSS tut es.myTable td { height: 1rem; }. Das Problem der Nichtauswählbarkeit mit den Pfeiltasten bleibt. Wahrscheinlich ist contenteditable nur dann sinnvoll, wenn auch edierbaren Inhalt gibt.Damit scheint aus Gründen der Zugänglichkeit die br-Krücke doch das Beste zu sein.
Bis demnächst
Matthias--
Du kannst das Projekt SELFHTML unterstützen,
indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.-
Hallo Matthias Apsel,
Das Problem der Nichtauswählbarkeit mit den Pfeiltasten bleibt.
nicht im Edge.
Bis demnächst
Matthias--
Du kannst das Projekt SELFHTML unterstützen,
indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
-
-
Hallo UA,
ja, das sehe ich auch gerade.
Die HTML Quelle
<tr> <td></td> <td></td> <td></td> <td></td> </tr>wird von Firefox im Inspektor dargestellt als
<tr> <td><br></td> <td><br></td> <td><br></td> <td><br></td> </tr>Diese <br> werden beim Parsen des HTML Dokuments automatisch ins DOM eingefügt, wenn contenteditable="true" gesetzt ist. Beim Setzen von innerHTML passiert das nicht.
Chrome fügt diese <br> generell nicht ein und zeigt die Zeilen so an als wäre ein <br> drin.
Die Frage ist nun: Wer hat den Bug? Es gibt einen 13 Jahre alten Mozilla-Bug (388655), bei dem es so aussieht als würde man das <br> in einer leeren Zelle als Bug ansehen und er wurde auch vor 13 Jahren mit "fixed" geschlossen. Ist der Bug wieder da, oder ist das ein anderes Szenario? Gibt
Ich finde es jedenfalls schräg. In der Spec lese ich spontan nichts darüber, dass ein <td> Element nicht leer sein darf.
Rolf
--
sumpsi - posui - obstruxi-
Hallo Rolf B,
Ist der Bug wieder da, oder ist das ein anderes Szenario?
Wahrscheinlich ist contenteditable nur dann sinnvoll, wenn auch edierbaren Inhalt gibt.
Bis demnächst
Matthias--
Du kannst das Projekt SELFHTML unterstützen,
indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.-
Hallo Matthias,
also DAS sehe ich anders - man muss doch die Möglichkeit vorsehen, eine leere Zelle auszufüllen.
In Chrome geht es ja. Dort hat eine Row mit leeren Zeilen eine Höhe von 1em (oder so), wenn contenteditable gesetzt ist.
Man kann das natürlich auch in Frage stellen. Ist es richtig, die Höhe einer Row von contenteditable abhängig zu machen?
Schon merkwürdig, dass die Spec das nicht festzulegen scheint (oder es ist dort in der typischen verquasten Art so versteckt, dass man es nur bei 100% Lektüre findet).
Rolf
--
sumpsi - posui - obstruxi -
Hi there,
Ist der Bug wieder da, oder ist das ein anderes Szenario?
Wahrscheinlich ist contenteditable nur dann sinnvoll, wenn auch edierbaren Inhalt gibt.
Über Sinn läßt sich trefflich streiten, alleine, auch nichts kann ein editierbarer Inhalt sein. Imho gibt es überhaupt keinen Grund, warum eine leere Tabellenzelle nach dem Laden des Dokuments nicht mit irgendeinem Inhalt befüllt werden sollte...
-
-
-
-
@@UA
function addRow() { var t = document.getElementById('t'); var newRow = t.insertRow(); var newCell; newRow.innerHTML = '<td></td><td></td><td></td><td></td>'; newRow = t.insertRow(); newRow.innerHTML = '<td>three</td><td></td><td></td><td></td>'; }Wird die Funktion nur ein einziges Mal aufgerufen?
Es ist nicht sinnvoll; die Tabelle bei jedem Funktionsaufruf erneut im DOM zu suchen. Das geschieht besser einmalig außerhalb der Funktion.
🖖 Stay hard! Stay hungry! Stay alive! Stay home!
--
Home Office ist so frustierend, weil man jetzt noch viel stärker bemerkt mit wievielen Menschen man zu tun hat, die nicht sinnerfassend lesen können. (@Grantscheam)