Versions-Historie des Beitrags „Rahmen nur um ausgefüllte Zellen einer dynamisch erstellten Tabelle“

Rahmen nur um ausgefüllte Zellen einer dynamisch erstellten Tabelle

bearbeitet von

Rolf b 22.02.2017 11:02

Ich mach mal den Gunnar: Mit Spans wäre das nicht bedienbar.

Nimm Buttons, gib ihnen z.B. einen 2px Rand und mach sie per Margin und calc(100% + 1px) ein Pixel größer als die Tabellenzelle, so dass sich ihre Ränder überlappen. Sonst hast Du blöde Ecken im Layout.

Den Klick-Handler legst Du auf die Tabelle und prüfst, ob das event-Target ein Button ist, dann brauchst Du nur eine Registrierung.

~~~js
for (let i=0; i<109; i++) {
tabelle.rows[pse[i*6+3]].cells[pse[i*6+4]].innerHTML='<button>'+pse[i*6+1]+'</button>';
}
tabelle.addEventListener('click', function(ev) {
if (ev.target.tagName === "BUTTON")
handleClick(this, ev.target.textContent)
};
~~~

~~~css
table {
border-collapse: collapse;
width: auto;
}

td {
width: 2em; height: 2em; padding: 0;
background-color: white;
}

button {
margin: -1px -1px; padding: 0; width: calc(100% + 2px); height: calc(100% + 2px);
border: 2px solid black;

}
~~~

[Fiddle](https://jsfiddle.net/bcouh0rb/)

_Rolf_

Rahmen nur um ausgefüllte Zellen einer dynamisch erstellten Tabelle

bearbeitet von

Rolf b 22.02.2017 11:12