komplette Tabellenzeile verlinken

[Meowsalot]

Guten Morgen,

ist es möglich eine komplette Tabellenzeile zu verlinken? Ich möchte gerne dass beim Ansprechpartner nicht nur der Namen sondern wie erwähnt die ganze Zelle verlinkt ist.

<table width="100%" id="tbl-user" class="tablesorter" style="margin-top: 2em;">
	<thead class="thead">
		<tr>
			<th style="width:90%">Anschrift</th>
			<th style="width:10%">Ansprechpartner</th>
		</tr>
	</thead>

	<tbody>    
		<tr>
			<td style="width:90%">xxxx</td>
			<td style="width:10%"><a href="#">xxxx</a></td>
		</tr>
	</tbody>
</table>

Edit: Eine Möglichkeit wäre, die mir aber nicht gefällt

onclick="window.open(this.href, '_blank', '');"

damit ist die ganze Zelle verlinkt.

Bis bald!
Meowsalot (Bernd)

[dedlfix]

Tach!

ist es möglich eine komplette Tabellenzeile zu verlinken?

Nicht im ganzen, aber pro Zelle müsstest du schon ein A-Element um den Inhalt legen.

Edit: Eine Möglichkeit wäre, die mir aber nicht gefällt

onclick="window.open(this.href, '_blank', '');"

damit ist die ganze Zelle verlinkt.

Eingeschränkt, weil das kein Link wie üblicherweise ist, sondern nur das Reagieren auf ein Click-Ereignis. Links reagieren jedoch auch auf andere Ereignisse, und haben Eigenschaften wie die Anspringbarkeit mittels Tabulator. So einem einfachen onclick fehlen solche Selbstverständlichkeiten. Außerdem braucht das eine Extrawurst beim Styling mittels CSS, weil sich diese Nicht-wirklich-Links auch nicht von Selektor a angesprochen fühlen.

Die Zellen einzeln zu verlinken ist eigentlich kein großer Aufwand, zumindest nicht, wenn du die Tabelle programmatisch erstellst.

dedlfix.

[Meowsalot]

Hallo dedlfix,

Die Zellen einzeln zu verlinken ist eigentlich kein großer Aufwand, zumindest nicht, wenn du die Tabelle programmatisch erstellst.

meine Idee war

display: block;
width: 100%;
background: yellow;
height: 100%;

Allerdings nimmt der Link nicht die volle Höhe ein

Ich weiß leider nie, wie hoch die Spalten daneben sind.

Bis bald! Meowsalot (Bernd)

[dedlfix]

Tach!

meine Idee war

display: block;
width: 100%;
background: yellow;
height: 100%;

Auf welches Element wendest du diese Regeln an? Ein display:block ohne width und height auf das a-Element in der Zelle würde es bereits tun, zumindest in der Breite.

Allerdings nimmt der Link nicht die volle Höhe ein

Dafür haben die CSS-Experten vielleicht was in der Tasche.

dedlfix.

[Rolf B]

Hallo dedlfix,

"volle Höhe" in einer Table Cell hat sich vor einiger Zeit doch schon mal als Gefummel herausgestellt, oder?

Rolf

[Meowsalot]

Hallo dedlfix,

Auf welches Element wendest du diese Regeln an? Ein display:block ohne width und height auf das a-Element in der Zelle würde es bereits tun, zumindest in der Breite.

direkt auf das a Damit ist der Link in der Breite anklickbar. Wenn jetzt noch die Höhe voll ausgefüllt wäre, dann wäre dieses perfekt.

Bis bald! Meowsalot (Bernd)

[Gunnar Bittersmann]

@@dedlfix

Tach!

ist es möglich eine komplette Tabellenzeile zu verlinken?

Nicht im ganzen, aber pro Zelle müsstest du schon ein A-Element um den Inhalt legen.

Das ist gar keine gute Idee. Nutzer assistiver Technologien wie Screenreadern bekommen statt einem Link einen ganzen Haufen davon angeboten, durch den sie durchnavigieren müssen – und das bei zweifelhaften Linktiteln und ohne jeglichen Hinweis, dass all diese Links zum selben Ziel führen. Nicht machen!

LLAP 🖖

[dedlfix]

Tach!

ist es möglich eine komplette Tabellenzeile zu verlinken?

Nicht im ganzen, aber pro Zelle müsstest du schon ein A-Element um den Inhalt legen.

Das ist gar keine gute Idee. Nutzer assistiver Technologien wie Screenreadern bekommen statt einem Link einen ganzen Haufen davon angeboten, durch den sie durchnavigieren müssen – und das bei zweifelhaften Linktiteln und ohne jeglichen Hinweis, dass all diese Links zum selben Ziel führen. Nicht machen!

Was ist mit den andern Nutzern? Die haben dasselbe Problem, nur dass sie es nicht vorgelesen bekommen. Statuszeilen mit Linkzielanzeige wurden auch anderenorts weitgehend zurückgefahren. Wenn es also darauf ankommt, das Linkziel zu wissen, oder zu erkennen, dass die Links zum selben Ziel führen, ist da wohl eher eine Lösung gefragt, die nicht nur die Screenreader im Auge hat. Was wären denn die Alternativen?

dedlfix.

[Gunnar Bittersmann]

@@dedlfix

Was wären denn die Alternativen?

Wie gewohnt wird der relevante Linktitel verlinkt. Mit CSS wird dafür gesorgt, dass die gesamte Tabellenzeile anclickbar ist.

LLAP 🖖

[marctrix]

Hej Gunnar,

@@dedlfix

Was wären denn die Alternativen?

Wie gewohnt wird der relevante Linktitel verlinkt. Mit CSS wird dafür gesorgt, dass die gesamte Tabellenzeile anclickbar ist.

Wie du selber schriebst: funktioniert in so gut wie keinem Browser. Ob es darüberhinaus so geschickt ist, Elemente über andere zu legen, sei mal dahin gestellt.

Statt dessen ein dutzend Links auf dasselbe Ziel ist für alle Tastatur-Nutzer ein Horror. Langweilig, weil bekannt und leicht bedienbar: ein Link in ein Feld (meist das erste oder letze) jeder Zeile, der Sinn macht (zum Beispiel "Datensatz xyz bearbeiten")…

Marc

[Gunnar Bittersmann]

@@marctrix

Wie du selber schriebst: funktioniert in so gut wie keinem Browser.

Es funktioniert in 100% der von mir verwendenten Browser. 😜

Ob es darüberhinaus so geschickt ist, Elemente über andere zu legen, sei mal dahin gestellt.

Warum sollte es das nicht sein? Die Voraussetzung erwähnte ich: Man darf dabei keine anderen interaktiven Elemente abdecken.

Langweilig, weil bekannt und leicht bedienbar: ein Link in ein Feld (meist das erste oder letze) jeder Zeile, der Sinn macht (zum Beispiel "Datensatz xyz bearbeiten")…

Natürlich, das ist die Grundfunktionalität.

Es spricht doch aber nichts dagegen, die zu verbessern (progressive enhancement) und für Mausschubser die clickbare Fläche zu vergrößern‽

LLAP 🖖

[marctrix]

Hej Gunnar,

@@marctrix

Wie du selber schriebst: funktioniert in so gut wie keinem Browser.

Es funktioniert in 100% der von mir verwendenten Browser. 😜

😀

Ob es darüberhinaus so geschickt ist, Elemente über andere zu legen, sei mal dahin gestellt.

Warum sollte es das nicht sein?

Weil ich es nicht mag! Nein, muss ich mal drüber nachdenken. Obwohl es mir schon ein ungutes Gefühl in der Bauchgegend verursacht Lösungen mit solchen Bedingungen in andere Hände zu übergeben, die das ggfs. nicht berücksichtigen oder gar für andre Anwendungsfälle nutzen (einen schönen, halbtransparenten Overlay-Effekt, der dann alles darunter liegende für Mausnutzer unerreichbar macht).

Die Voraussetzung erwähnte ich: Man darf dabei keine anderen interaktiven Elemente abdecken.

Ja. Hoffentlich denkt jeder Nicht-Frontender immer daran, dem du so etwas an die Hand gibst…

Langweilig, weil bekannt und leicht bedienbar: ein Link in ein Feld (meist das erste oder letze) jeder Zeile, der Sinn macht (zum Beispiel "Datensatz xyz bearbeiten")…

Natürlich, das ist die Grundfunktionalität.

Es spricht doch aber nichts dagegen, die zu verbessern (progressive enhancement) und für Mausschubser die clickbare Fläche zu vergrößern‽

Ist es besser, wenn man irgendwohin klicken kann und dann eine Aktion ausgelöst wird, obwohl man gar nicht auf den Link/Button geklickt hat, sondern ganz woanders hin?

Ist das wirklich „predictable“ — vielleicht, wenn es konsistent verwendet wird für die Mehrzahl der Benutzer. Für Menschen mit Konzentrationsschwäche: lenken die Effekte beim Überfahren mit der Maus zu sehr ab?

Das würde ich wohl eher konventionell-„langweilig“-mit-Sicherheit-für-jedermann-verständlich umsetzen wollen…

Marc

[Gunnar Bittersmann]

@@marctrix

… oder gar für andre Anwendungsfälle nutzen (einen schönen, halbtransparenten Overlay-Effekt, der dann alles darunter liegende für Mausnutzer unerreichbar macht).

Dafür ist das ::before-Pseudoelement da, das unter dem interaktiven Element liegt.

Ja. Hoffentlich denkt jeder Nicht-Frontender immer daran, dem du so etwas an die Hand gibst…

Das tu ich nicht. Ich sage eher: Nicht-Frontender, die keinen blassen Schimmer von HTML und CSS haben, sollen ihre Finger davon lassen.

(Was auch heißt: „Frontender“ sind in dem Zusammenhang nicht diejenigen, die das im Arbeitsvertrag zu stehen haben, sondern diejenigen, die Ahnung von HTML (incl. ARIA, …) und CSS haben. Das sehen einige anders. Dann bin ich eben kein Frontender.)

Es spricht doch aber nichts dagegen, die zu verbessern (progressive enhancement) und für Mausschubser die clickbare Fläche zu vergrößern‽

Ist es besser, wenn man irgendwohin klicken kann und dann eine Aktion ausgelöst wird, obwohl man gar nicht auf den Link/Button geklickt hat, sondern ganz woanders hin?

Ein Beispiel hatte ich genannt.

Natürlich muss das im UI kenntlich gemacht werden, welche clickbare Fläche welche Aktion auslöst. Bspw. mit Hover-Effekt. Oder einen Rahmen um die Box.

(Ob man hier die ganze Tabellenzeile bei Tastatursteuerung mittels :focus-within hervorheben will, kann man nochmals überlegen.)

LLAP 🖖

[marctrix]

Hej Gunnar,

… oder gar für andre Anwendungsfälle nutzen (einen schönen, halbtransparenten Overlay-Effekt, der dann alles darunter liegende für Mausnutzer unerreichbar macht).

Dafür ist das ::before-Pseudoelement da, das unter dem interaktiven Element liegt.

Ja. Hoffentlich denkt jeder Nicht-Frontender immer daran, dem du so etwas an die Hand gibst…

Das tu ich nicht. Ich sage eher: Nicht-Frontender, die keinen blassen Schimmer von HTML und CSS haben, sollen ihre Finger davon lassen.

Hier im Forum wünschen sich die meisten Fragenden wohl eher fertige Lösungen an Stelle von Erklärungen. Da scannt wohl so mancher nach kopierfähigen Code deine Antworten…

Aber lassen wir das, sind eh nur Annahmen…

Ist eh keine Kritik an der technischen Umsetzung, die ist gewohnt sauber!

Es spricht doch aber nichts dagegen, die zu verbessern (progressive enhancement) und für Mausschubser die clickbare Fläche zu vergrößern‽

Ist es besser, wenn man irgendwohin klicken kann und dann eine Aktion ausgelöst wird, obwohl man gar nicht auf den Link/Button geklickt hat, sondern ganz woanders hin?

Ein Beispiel hatte ich genannt.

Das ist etwas, was man von vielenWebseiten kennt: ein Teaser (meist nur dessen Überschrift, oft auch noch das Artikel-Bild) sind mit dem zugehörigen Artikel verlinkt.

Eine Tabellenzeile besteht aber aus vielen optisch voneinander getrennten Einträgen. Dass die alle eine Aktion auslösen, die in einer einzelnen Tabellenzelle beschrieben ist, finde ich nicht besonders intuitiv. Mag für Fachanwendungen ok sein, die man jeden Tag bedient. Aber selbst da vermutlich selten nötig.

Natürlich muss das im UI kenntlich gemacht werden, welche clickbare Fläche welche Aktion auslöst. Bspw. mit Hover-Effekt. Oder einen Rahmen um die Box.

Wie teilst du denn mit, welche Aktion ausgelöst wird? Die Beschriftung in der hervorgehobenen Tabellenzeile nochmals hervorheben?

Wie gesagt abgesehen davon, dass du ein schönes Beispiel dafür gebracht hast, dass so etwas technisch machbar ist, mag ich mich (noch) nicht mit dem Gedanken anfreunden, das auf einer Webseite dann auch vorgesetzt zu bekommen.

Wenn eine Tabellenzelle zu klein ist um angeklickt zu werden, ist sicher die Schriftart oder das Icon zu klein gewählt.

(Ob man hier die ganze Tabellenzeile bei Tastatursteuerung mittels :focus-within hervorheben will, kann man nochmals überlegen.)

Nicht, dass Tastaturnutzer den Vorteil hätten, genau zu sehen, was ausgelöst wird! Lass sie doch lieber auch die ganze Tabellenzeile durchsuchen, bis sie die Beschreibung der Aktion gefunden haben!

Nein! Bitte, bitte nicht machen…

Marc

Disclaimer: Es mag immer (seltene) Sonderdesign- und Anwendungsfälle geben, in denen so etwas sinnvoll ist.

[Rolf B]

Hallo Meowsalot,

eine Alternative wäre, keine Table einzusetzen, sondern eine Liste, deren Items aus einem <a> Element bestehen. Dieses <a> stylest Du per CSS als display:block und setzt eine <dl> hinein, die z.B. als display:flex gestyled ist damit du problemlos die 9:1 Breitenverteilung hinbekommst.

<li>
  <a href="...">
    <dl>
      <dt>
      <dd>
    </dl>
  </a>
</li>

Man kann das auch vereinfachen zu

<li>
  <a href="...">
    <div>
    <div>
  </a>
</li>

Allerdings finde ich von der Natur der Sache her eine Description List schöner.

Damit hättest Du dann durchgehende Links und wenn jemand mit TAB durchläuft, muss er nicht durch die Spalten springen. Die Frage nach der vollen Höhe stellt sich auch nicht.

Beispiel-Fiddle mit CSS

Ob das den Segen der HTML-Päpste findet, weiß ich natürlich mal wieder nicht :)

Rolf

[Gunnar Bittersmann]

@@Rolf B

eine Alternative wäre, keine Table einzusetzen, sondern eine Liste

Das ist gar keine gute Idee. Nutzern assistiver Technologien wie Screenreadern geht der Zusammenhang der Spalten völlig verloren.

Cheatahs Weisheit: Wenn ist sich um tabellarische Daten handelt, ist alles andere als eine Tabelle falsch.

LLAP 🖖

[Rolf B]

Hallo Gunnar,

also gut, Euer Heiligkeit, nachdem Euer Bannstrahl zwei Lösungen geröstet hat, wie wäre denn die zugängliche Lösung, die zum Wunsch des Bittstellers passt?

Rolf

[Gunnar Bittersmann]

@@Rolf B

also gut, Euer Heiligkeit

😇

nachdem Euer Bannstrahl zwei Lösungen geröstet hat

⚡️

wie wäre denn die zugängliche Lösung, die zum Wunsch des Bittstellers passt?

Den Link so zu lassen wie er ist. Und etwas CSS-Magie. 🧙‍♂️

LLAP 🖖

[Henry]

Hallo Rolf,

also gut, Euer Heiligkeit, nachdem Euer Bannstrahl zwei Lösungen geröstet hat, wie wäre denn die zugängliche Lösung, die zum Wunsch des Bittstellers passt?

roflmao… so bildlich schön formuliert, dass ich einfach nicht anders konnte 😉

Gruss
Henry

[beatovich]

hallo

Cheatahs Weisheit: Wenn ist sich um tabellarische Daten handelt, ist alles andere als eine Tabelle falsch.

Was sind tabellarische Daten?

[JürgenB]

Hallo,

Was sind tabellarische Daten?

Daten, für die sich die Organisationsstruktur Zeilen und Spalten anbietet.

Gruß
Jürgen

[beatovich]

Was sind tabellarische Daten?

Daten, für die sich die Organisationsstruktur Zeilen und Spalten anbietet.

Das ist zuwenige, denn es können sich auch andere Darstellungsformen anbieten.

[JürgenB]

Hallo,

Was sind tabellarische Daten?

Daten, für die sich die Organisationsstruktur Zeilen und Spalten anbietet.

Das ist zuwenige, denn es können sich auch andere Darstellungsformen anbieten.

und welche Darstellungsformen haben noch Zeilen und Spalten?

Gruß
Jürgen

[beatovich]

hallo

Daten, für die sich die Organisationsstruktur Zeilen und Spalten anbietet. Das ist zuwenige, denn es können sich auch andere Darstellungsformen anbieten. und welche Darstellungsformen haben noch Zeilen und Spalten?

Darum gehts nicht. Tabellarische Daten verändern ihre Bedeutung, sobald du Spalten oder Zeilen austauschst/sortierst. Wo Daten ihre Bedeutung nicht verändern, handelt es sich nicht um tabellarische Daten sondern bloss um Daten als Tabelle dargestellt.

Siehe Scrabble oder Game of Life

[JürgenB]

Hallo,

Daten, für die sich die Organisationsstruktur Zeilen und Spalten anbietet. Das ist zuwenige, denn es können sich auch andere Darstellungsformen anbieten. und welche Darstellungsformen haben noch Zeilen und Spalten?

Darum gehts nicht.

ach, worum denn?

Tabellarische Daten verändern ihre Bedeutung, sobald du Spalten oder Zeilen austauschst/sortierst.

echt? Ist mir noch nicht aufgefallen. Warum soll sich die Bedeutung von Daten ändern, wenn ich sie nach verschiedenen Kriterien sortiere? Ich hatte kürzlich eine Tabelle mit Prüfungsdaten. Je nach Weiterverarbeitungsziel habe ich sie nach Name oder Note sortiert. Auf die Bewertung des Einzelnen hatte das keinen Einfluss.

Gruß
Jürgen

[beatovich]

hallo

Tabellarische Daten verändern ihre Bedeutung, sobald du Spalten oder Zeilen austauschst/sortierst.

echt? Ist mir noch nicht aufgefallen. Warum soll sich die Bedeutung von Daten ändern, wenn ich sie nach verschiedenen Kriterien sortiere? Ich hatte kürzlich eine Tabelle mit Prüfungsdaten. Je nach Weiterverarbeitungsziel habe ich sie nach Name oder Note sortiert. Auf die Bewertung des Einzelnen hatte das keinen Einfluss.

Dann hast du es eben nicht mit tabellarischen Daten zu tun. Du kannst sie ebenso als Liste von Listen darstellen.

[JürgenB]

Hallo,

Du kannst sie ebenso als Liste von Listen darstellen.

au Mann, musst du Tabellen hassen 😀

Gruß
Jürgen

[beatovich]

hallo

Du kannst sie ebenso als Liste von Listen darstellen.
au Mann, musst du Tabellen hassen 😀

Wieso denn? Wir können doch mal zusammen Schach spielen.

[marctrix]

Hej JürgenB,

Was sind tabellarische Daten?

Daten, für die sich die Organisationsstruktur Zeilen und Spalten anbietet.

Nur wenn sich gleichzeitig Spalten (und/oder Zeilenüberschriften) finden lassen.

Marc

[Gunnar Bittersmann]

@@beatovich

Cheatahs Weisheit: Wenn ist sich um tabellarische Daten handelt, ist alles andere als eine Tabelle falsch.

Was sind tabellarische Daten?

Daten, die sowohl einen Bezug zu denen in den anderen Zellen derselben Spalte haben (die Art des Bezugs steht üblicherweise in der Spaltenüberschrift) als auch einen Bezug zu den Daten in den anderen Zellen derselben Zeile haben (die Art des Bezugs steht üblicherweise in der Kopfzelle der Zeile).

LLAP 🖖

[beatovich]

hallo

Was sind tabellarische Daten?

Daten, die sowohl einen Bezug zu denen in den anderen Zellen derselben Spalte haben (die Art des Bezugs steht üblicherweise in der Spaltenüberschrift) als auch einen Bezug zu den Daten in den anderen Zellen derselben Zeile haben (die Art des Bezugs steht üblicherweise in der Kopfzelle der Zeile).

Ich lasse Scrabble und Game of Life als tabellarische Daten durchgehen. Der Rest kann meist auch anders und viel sinnvoller dargestellt werden.

[Tabellenkalk]

Hallo,

Ich lasse Scrabble und Game of Life als tabellarische Daten durchgehen. Der Rest kann meist auch anders und viel sinnvoller dargestellt werden.

Da kann ich nun grade keine tabellarischen Daten erkennen. Es handelt sich um Daten in einem Raster, die von ihren Nachbarzellen abhängen. Ein conwayscher Gleiter bleibt ein Gleiter auch wenn du die y-x-Koordinaten vertauscht.

Gruß
Kalk

[beatovich]

hallo

Ich lasse Scrabble und Game of Life als tabellarische Daten durchgehen. Der Rest kann meist auch anders und viel sinnvoller dargestellt werden.

Da kann ich nun grade keine tabellarischen Daten erkennen. Es handelt sich um Daten in einem Raster, die von ihren Nachbarzellen abhängen. Ein conwayscher Gleiter bleibt ein Gleiter auch wenn du die y-x-Koordinaten vertauscht.

a) Wenn ich eine Tabelle an der x/y-Achse spiegle, was ergibt das dann für eine Datenstruktur!

b) Mit welchen Html-Elementen werden 2-dimensionale Rasterdaten am Besten dargestellt?

[Tabellenkalk]

Hallo,

a) Wenn ich eine Tabelle an der x/y-Achse spiegle, was ergibt das dann für eine Datenstruktur!

Ist das eine Frage!

b) Mit welchen Html-Elementen werden 2-dimensionale Rasterdaten am Besten dargestellt?

Kommt drauf an. Spontan fällt mir die Rastergrafik ein…
also das img-Element ;)

Gruß
Kalk

[Gunnar Bittersmann]

@@beatovich

a) Wenn ich eine Tabelle an der x/y-Achse spiegle, was ergibt das dann für eine Datenstruktur!

Wenn du an der x-Achse spiegelst: eine Tabelle. Nur dass die Reihenfolge der Zeilen umgedreht ist und der Tabellenkopf unten ist.

Wenn du an der y-Achse spiegelst: eine Tabelle. Nur dass die Reihenfolge der Spalten umgedreht ist.

In beiden Fällen ist der Text in Spiegelschrift.

Beantwortet das deine Frage? Ach so, war ja gar keine. 😉

Wenn du an der Diagonalen spiegelst: eine Tabelle. Zeilen und Spalten haben getauscht. (Transponierung)

b) Mit welchen Html-Elementen werden 2-dimensionale Rasterdaten am Besten dargestellt?

table, caption, colgroup, col, thead, tbody, tfoot, tr, th, td.

LLAP 🖖

[Tabellenkalk]

Hallo,

b) Mit welchen Html-Elementen werden 2-dimensionale Rasterdaten am Besten dargestellt?

table, caption, colgroup, col, thead, tbody, tfoot, tr, th, td.

Hast du mal in google-maps (oder entsprechendes) auf Satellitenbild umgeschaltet? Klassischer Fall von Rasterdaten. Du willst nicht für jedes Pixel eine Tabellenzelle, oder? 😉

Gruß
Kalk

[Rolf B]

Hallo Gunnar,

Game of Life würde ich eher mit einem Canvas realisieren wollen. Tastaturbedienung für die Bearbeitung des Startfeldes macht dann etwas Arbeit, aber die Unterstützung für Sehbehinderte würde ich auf ein taktiles Life schieben wollen (was dann eher als Massagebank funktionieren würde); die Defaultdarstellung dürfte sich für Screenreader nicht eignen.

"Punkt, leer, leer, Punkt - oh, Punkt weg - ..."

Rolf

[marctrix]

Hej Rolf,

eine Alternative wäre, keine Table einzusetzen, sondern eine Liste,

Ob das den Segen der HTML-Päpste findet, weiß ich natürlich mal wieder nicht :)

Kommt drauf an, ob tabellarische Daten dargestellt werden sollen…

Marc

[Henry]

Hallo Meowsalot,

Hab mal ein wenig dran geknobelt und eine Lösung mit colspan und js gebastelt. Ob das so Sinn macht… hmm weiß noch nicht, aber bestimmt ausbaufähig.

Ach ja, und funktioniert leider noch nicht verlässlich im IE, bastle gleich noch mal dran.

Zum Testen hier

Als Script hier:

<script>
function tr2url(elem){
if(elem.firstChild.className == 'tr2url'){return;}

// Original speichern
var orgtxt = elem.innerHTML;

var url = elem.getElementsByTagName('a')[0].href;
var urltxt = elem.getElementsByTagName('a')[0].innerHTML;
//alert(url);

urltxt = urltxt+' '+elem.firstChild.innerHTML;
//alert(urltxt);
var newtd = '<td class="tr2url" colspan="2"><a style="display:block;text-decoration:none;" href="'+url+'">'+urltxt+'</a></td>'; 

//alert(newtd);
elem.innerHTML = newtd;


// Original wieder herstellen
elem.onmouseout = function(){this.innerHTML = orgtxt;}
}
</script>

Gruss
Henry

[Henry]

Nachtrag:

bastle gleich noch mal dran.

Habe das (vielleicht Bubble) Problem noch nicht ganz geklärt aber kleine Styleänderung machts schon mal ein wenig stabiler.

<style>
.tablesorter{border-spacing:10px;}
.tablesorter td{border:2px solid #000;padding:3px;}
.tablesorter tr:hover{background-color:#f5f5f5;}
</style>

Gruss
Henry

[marctrix]

Hej Henry,

Zum Testen hier

Ich kann da nix testen, jedenfalls nciht mit der Tastatur. Bekomme keinen Fokus auf die Links…

Marc

[Gunnar Bittersmann]

@@Meowsalot

ist es möglich eine komplette Tabellenzeile zu verlinken?

Ja, und die hatte ich letztens erst wieder hier im Forum vorgestellt: ein absolut positioniertes a::after-Pseudoelement, dass sich über die gesamte Box (hier: die Tabellenzeile) legt.

Wenn’s noch ein Hintergrund dazu sein soll, dieser mit a::before-Pseudoelement.

☞ Beispiel

Es wird hier davon ausgegangen, dass:

• sich nur jeweils ein Link in einer Tabellenzeile befindet
• keine Elemente zwischen tr und a eine vom Defaultwert static abweichende Angabe für position haben.

Anmerkung: CSS 2.2 sagt zwar: “The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined”; aber das bezieht sich wohl auf den Offset. Im CSS Positioned Layout Module Level 3 wird auch der definiert.

tr { position: relative } dient hier aber gar nicht für einen Offset, sondern lediglich dazu, dass sich die absolute Positionierung der a::after- und a::before-Pseudoelemente auf die jeweilige Tabellenzeile bezieht.

Nachtrag: Funktioniert gegenwärtig aber trotzdem weder in Edge, IE, Safari, Chrome, …; sondern nur im Firefox.

LLAP 🖖

[JürgenB]

Hallo Gunnar,

☞ Beispiel

ist das gewünscht, dass (im Safari) beim hover die ganze Tabelle eine andere Hintergrundfarbe erhält?

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

☞ Beispiel

ist das gewünscht, dass (im Safari) beim hover die ganze Tabelle eine andere Hintergrundfarbe erhält?

Drecksbrowser, der. Und Chrome auch.

Die Hintergrundfarbe ist nicht einmal das Tragischste. Die a::after-Elemente füllen den Viewport; der oberste gewinnt. Es führen also alle vermeintlichen Links zum letzten Linkziel.

Da war ich wohl mit „aber das bezieht sich wohl auf den Offset“ etwas zu optimistisch. Bloß gut, dass ich mir mit dem Wörtchen „wohl“ ein Schlupfloch gelassen habe. 😉

Dann müssen wir wohl abwarten, bis WebKits/Blinks position: relative gemäß Level 3 auch auf tr u.dgl. anwenden.

Bis dahin dann doch eine JavaScript-Lösung …

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Drecksbrowser, der. Und Chrome auch.

Und IE auch. Und Edge auch.

Bis dahin dann doch eine JavaScript-Lösung …

Welche so aussieht: click-Eventhandler für Tabelle (event delegation), vom Event.target im DOM hoch bis zum nächsten tr-Element, darin das a finden und clicken.

☞ Codepen

Funktioniert nicht im IE? (Wegen closest()?) Doch, funktioniert. Für euch getestet. Progressive enhancement.

LLAP 🖖

[Henry]

Hallo Gunnar,

Funktioniert nicht im IE? (Wegen closest()?) Doch, funktioniert. Für euch getestet. Progressive enhancement.

Nö. Im IE nur der normale Link

Gruss
Henry

[Gunnar Bittersmann]

@@Henry

Funktioniert nicht im IE? (Wegen closest()?) Doch, funktioniert. Für euch getestet. Progressive enhancement.

Nö. Im IE nur der normale Link

Genau wie ich sagte: Es funktioniert.

LLAP 🖖

[Henry]

Hallo Gunnar,

Nö. Im IE nur der normale Link

Genau wie ich sagte: Es funktioniert.

rofl… hätte ich mir auch denken können, dass du das wieder so siehst 😉

Gruss
Henry

[Gunnar Bittersmann]

@@Henry

Nö. Im IE nur der normale Link

Genau wie ich sagte: Es funktioniert.

rofl… hätte ich mir auch denken können, dass du das wieder so siehst 😉

Was ist eigentlich IE?

Man kann natürlich Element.cosest() auch mal eben polyfillen, indem man sich mit einer WHILE-Schleife im DOM hochhangelt, bis man auf ein tr-Element trifft. Wenn $Kunde sich nicht davon abbringen lässt, das zu brauchen, und dafür ’n Hunderter extra lockermacht.

LLAP 🖖

[Henry]

Hallo Gunnar,

Man kann natürlich Element.cosest() auch mal eben polyfillen, indem man sich mit einer WHILE-Schleife im DOM hochhangelt, bis man auf ein tr-Element trifft. Wenn $Kunde sich nicht davon abbringen lässt, das zu brauchen, und dafür ’n Hunderter extra lockermacht.

Oder direkt IE ausschließen beim script, weil Wirkung hat's ja eh keine darauf und Browser spart sich den Versuch.

Mal eine andere Frage, du weißt ja, dass ich Codepen nicht mag, aber vielleicht habe ich ja auch nur die falsche Sichtweise, wenn ihr den Laden so gerne nutzt. Klär mich mal bitte auf, was euch da so gefällt.

Für mich ist es diese Sichtweise:

Ich komme dahin = dunkel, schon nicht einladend, subjektiv, geschenkt…

Objektiv allerdings:

Muss erst warten bis das eigentlich Pen, selbst wenn nur zwei Zeilen, vorgeladen(Sanduhr) ist. Warum? Auch später aufgrund der vielen kommerziellen Hintergrund/Trackingscripte, sehr langsam.

Dann würde ich gerne das Ganze auch mal komplett sehen. Nö, bei dir nicht bei anderen zumindest die angebliche Option FullPage, die sich aber nicht als solche heraus stellt.

Und immer wieder die unsagbaren Scripte von Codepen, die sowohl im Hintergrund des Frameworks dort laufen, als auch (und das geht gar nicht) im Quelltext des Userbeispiels.

Dann bleiben mir zwei Möglichkeiten zum vernünftigen Testen, entweder meinen Rechner sich mit den dort ständig auflauernden Eventwächtern rumärgern zu lassen um mühselig einzeln HTML, CSS, JS rauszupflücken um dann wieder bei mir zusammenzusetzen oder TOR2 ich lade die Sache als Zip runter was ich evtl. entpacken muss und habe dann mehrere Ordner wo ich dann wieder puzzlen darf. Und das alles für oft nur ein paar Zeilen Code?

Also, die Nachteile sind, aus meiner Sicht, gewaltig. Was sind die Vorteile?

Gruss
Henry

[Rolf B]

Hallo Henry,

wenn ihr den Laden so gerne nutzt.

„ihr“ ist ein weites Wort. CodePen ist lange nicht für jeden hier das Weblabor der Wahl. Ich z.B. verwende viel lieber JSFiddle. Such Dir das Weblabor, das Dir gefällt und das deine Usecases unterstützt, und verwende es. Oder mach's lokal in der IDE. Wird auch nicht bestraft.

Was sind die Vorteile?

• Dass der Pen den Ausgabebereich aktualisiert ohne dass man explizit aktualisieren muss
• Dass es merkwürdig benannte (Haml? Slim?! Pug!??!, Markdown) HTTP Präprozessoren gibt, die aus kryptischen Kürzeln HTML generieren können. APL für's Web, sozusagen.
• Dass es eine Menge CSS Präprozessoren unterstützt
• Dass Gunnar es mag

Rolf

[Henry]

Hallo Rolf,

Ich z.B. verwende viel lieber JSFiddle.

Aus meiner Sicht schon besser als codepen: Aber auch den Nachteil der seperaten Dateien, keine freien HEAD-Angaben und auch schon wieder eigenen Code(aber nicht viel) im Userbeispiel-Quelltext.

Such Dir das Weblabor, das Dir gefällt und das deine Usecases unterstützt, und verwende es.

Habe ich ja schon, den tryit-editor von w3schools, zumindest so lange der sich hoffentlich nicht ändert.

Oder mach's lokal in der IDE. Wird auch nicht bestraft.

Fehlt der Luxus der einfachen Veröffentlichung 😉

Was sind die Vorteile?

• Dass der Pen den Ausgabebereich aktualisiert ohne dass man explizit aktualisieren muss

Macht JSFiddle jetzt auch. Einstellungen -> Beta-Version

• Dass es merkwürdig benannte (Haml? Slim?! Pug!??!, Markdown) HTTP Präprozessoren gibt, die aus kryptischen Kürzeln HTML generieren können. APL für's Web, sozusagen.
• Dass es eine Menge CSS Präprozessoren unterstützt

und damit auch eine Menge Ballast.

• Dass Gunnar es mag

Ja 😉

Danke für deine Ansicht.

Gruss
Henry

[dedlfix]

Tach!

Aus meiner Sicht schon besser als codepen: Aber auch den Nachteil der seperaten Dateien, keine freien HEAD-Angaben und auch schon wieder eigenen Code(aber nicht viel) im Userbeispiel-Quelltext.

Welche Anwendungsfälle für Head-Elemente hast du, die sich nicht auch im Body unterbringen lassen? Die Felder für Javascript und CSS musst du ja nicht nutzen. Du kannst entsprechende style- und script-Bereiche auch im HTML-Teil unterbringen.

Habe ich ja schon, den tryit-editor von w3schools, zumindest so lange der sich hoffentlich nicht ändert.

Kann man machen, vor allem, wenn es dir wichtig ist, das Dokument komplett zu sehen. Aber eigentlich braucht man das Beiwerk meist nicht, um mal eben einen bestimmten Teilaspekt oder ein kleines, lokal begrenztes Problem zu zeigen. Vielleicht ist es auch eher von Vorteil, auf die "Gewaltenteilung" im Web hinzuweisen, indem man die Codearten separiert zeigt. Oder übersichtlicher, wenn weiß, wo die Eingabefelder liegen und nicht erst script und style im Heuhaufen suchen muss.

• Dass es merkwürdig benannte (Haml? Slim?! Pug!??!, Markdown) HTTP Präprozessoren gibt, die aus kryptischen Kürzeln HTML generieren können. APL für's Web, sozusagen.
• Dass es eine Menge CSS Präprozessoren unterstützt

und damit auch eine Menge Ballast.

Wie mans nimmt. Der Ballast ist da, um die eigene Arbeit zu erleichtern, weil man damit Abkürzungen gehen kann, die beispielsweise im eigentlichen HTML oder CSS nicht vorgesehen sind.

dedlfix.

[marctrix]

Hej Henry,

Habe ich ja schon, den tryit-editor von w3schools, zumindest so lange der sich hoffentlich nicht ändert.

Funktioniert bei mir nicht…

Vielleicht finde ich dort auch die Entstellungen nciht, komme mit Codepen deutlich besser zurecht und kann wie gewohnt code schreiben (mit oder ohne SASS usw)

Marc

[Matthias Apsel]

Hallo Rolf B,

Was sind die Vorteile?

• Dass der Pen den Ausgabebereich aktualisiert ohne dass man explizit aktualisieren muss
• Dass es merkwürdig benannte (Haml? Slim?! Pug!??!, Markdown) HTTP Präprozessoren gibt, die aus kryptischen Kürzeln HTML generieren können. APL für's Web, sozusagen.
• Dass es eine Menge CSS Präprozessoren unterstützt
• Dass Gunnar es mag

• die Möglichkeit, backlinks zu der entsprechenden Diskussion in diesem Forum zu setzen

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Henry

Man kann natürlich Element.cosest() auch mal eben polyfillen, indem man sich mit einer WHILE-Schleife im DOM hochhangelt, bis man auf ein tr-Element trifft. Wenn $Kunde sich nicht davon abbringen lässt, das zu brauchen, und dafür ’n Hunderter extra lockermacht.

Oder direkt IE ausschließen beim script, weil Wirkung hat's ja eh keine darauf und Browser spart sich den Versuch.

IE ist schon durch die Pfeilfunktion ausgeschlossen. Oder gar schon durch const?

Mit var und function und Element.cosest()-Polyfill von MDN siehts dann so aus: Codepen.

Mal eine andere Frage, du weißt ja, dass ich Codepen nicht mag, aber vielleicht habe ich ja auch nur die falsche Sichtweise, wenn ihr den Laden so gerne nutzt.

Und schon wieder … 😉

LLAP 🖖

[Meowsalot]

Hallo Gunnar,

☞ Codepen

danke dein Beispiel. Lässt sich dieses auch so umbauen dass ich nicht alle Zellen (von links nach rechts) verlinkt bekomme sondern es soll sich nur um eine handeln.

Bis bald!
Meowsalot (Bernd)

[marctrix]

Hej Meowsalot,

☞ Codepen

danke dein Beispiel. Lässt sich dieses auch so umbauen dass ich nicht alle Zellen (von links nach rechts) verlinkt bekomme sondern es soll sich nur um eine handeln.

Das geht mit CSS:

HTML:

<table>
  <tr>
    <td>
      <a href="#">foo</a>
    </td>
    <td>
      <a href="#">
        foo<br>
        möp
     </a>
    </td>
  </tr>
</table>

CSS:

tr, td {
  display: flex;
  justify-content: stretch;
}

td a {background:#ffa;}

Grid geht auch. Ist die Frage, ob das unbedingt sinnvoll ist, aus einer Tabelle Flexboxen oder ein Grid zu machen. Manchmal kann das sogar andere Probleme beseitigen, manchmal zusätzliche erzeugen.

So hast du beispielsweise die Möglichkeit, die Daten für z.B. Smartphones neu anzuordnen…

Marc

[Gunnar Bittersmann]

@@marctrix

Ist die Frage, ob das unbedingt sinnvoll ist, aus einer Tabelle Flexboxen oder ein Grid zu machen. Manchmal kann das sogar andere Probleme beseitigen, manchmal zusätzliche erzeugen.

“When CSS display:block or display:grid or display:flex is set on the table element, bad things happen. The table is no longer represented as a table in the accessibility tree, row elements/semantics are no longer represented in any form.”
—Steve Faulkner, Short note on what CSS display properties do to table semantics

Wenn man die display-Eigenschaft von Tabellenelementen ändert, könnte man die Tabellenstruktur mit role-Attributen erhalten, was aber laut Adrian Roselli auch nicht ganz unproblematisch ist: Tables, CSS Display Properties, and ARIA

LLAP 🖖

[marctrix]

Hej Gunnar,

Danke, wichtiger Hinweis (hätte ich eigentlich selber dran denken - müssen)!!!

Marc

[MudGuard]

Hi,

<table>
  <tr>
    <td>
      <a href="#">foo</a>
    </td>
    <td>
      <a href="#">
        foo<br>
        möp
     </a>
    </td>
  </tr>
</table>

CSS:

tr, td {
  display: flex;
  justify-content: stretch;
}

td a {background:#ffa;}

Grid geht auch. Ist die Frage, ob das unbedingt sinnvoll ist, aus einer Tabelle Flexboxen oder ein Grid zu machen.

Ist dabei sichergestellt, daß bei mehreren Zeilen die td-Elemente einer Spalte jeweils gleich breit sind?

cu,
Andreas a/k/a MudGuard

[marctrix]

Hej MudGuard,

[Flexboxen für Tabellen]

Grid geht auch. Ist die Frage, ob das unbedingt sinnvoll ist, aus einer Tabelle Flexboxen oder ein Grid zu machen.

Ist dabei sichergestellt, daß bei mehreren Zeilen die td-Elemente einer Spalte jeweils gleich breit sind?

Nein, guter Einwand! @Gunnar Bittersmann hatte auch schon einen. Beide sind berechtigt und meine Idee war eine doofe!

Kriegt beide ein Plus fürs Aufpassen!

Marc

[Gunnar Bittersmann]

@@Meowsalot

☞ Codepen

danke dein Beispiel. Lässt sich dieses auch so umbauen dass ich nicht alle Zellen (von links nach rechts) verlinkt bekomme sondern es soll sich nur um eine handeln.

Sicher ließe es sich das.

In dem Fall lässt sich aber mein ursprüngliches Beispiel ganz einfach umbauen, indem position: relative nicht für tr, sondern für td gesetzt wird. Und das funktioniert dann auch in Edge, IE, Safari, Chrome. Guckst du.

LLAP 🖖

[Meowsalot]

Hallo Gunnar,

leider funktioniert dein Beispiel nicht so wie ich es meinte oder ich habe es falsch erklärt. Ich habe ein online Beispiel:

https://codepen.io/anon/pen/bvqdGv

Und es soll in diesem Beispiel nur der "Ansprechpartner" komplett verlinkt sein. Bei den Optionen in der dritten Spalte macht es keinen Sinn und darf es auch nicht.

Bis bald!
Meowsalot (Bernd)

[Gunnar Bittersmann]

@@Meowsalot

leider funktioniert dein Beispiel nicht so wie ich es meinte oder ich habe es falsch erklärt. Ich habe ein online Beispiel:

https://codepen.io/anon/pen/bvqdGv

Und es soll in diesem Beispiel nur der "Ansprechpartner" komplett verlinkt sein.

Dann musst du eben diese Zellen in CSS selektierbar machen, z.B. indem du ihnen im HTML eine Klasse verpasst: <td class="ansprechpartner">

Im Stylesheet dann:

.ansprechpartner { position: relative }

.ansprechpartner a::before, .ansprechpartner a::after { … }

„Link 1“ wird noch durch sinnvolle und unterschiedliche(!) Linktitel ersetzt?

Bei den Optionen in der dritten Spalte macht es keinen Sinn und darf es auch nicht.

Bei den Optionen in der dritten Spalte macht es vermutlich keinen Sinn, a-Elemente zu verwenden, und darf es auch nicht.

Was soll da passieren? Wird zu einer anderen Seite gegangen? Wenn nein, ist a falsch und du möchtest buttons verwenden.

LLAP 🖖

[Meowsalot]

Hallo Gunnar,

Dann musst du eben diese Zellen in CSS selektierbar machen, z.B. indem du ihnen im HTML eine Klasse verpasst: <td class="ansprechpartner"> Im Stylesheet dann:

.ansprechpartner { position: relative }

.ansprechpartner a::before, .ansprechpartner a::after { … }

danke dir, jetzt habe ich es auch verstanden. Nur so aus Interesse könnte man auch sagen nehme alle Spalten nur die, die eine bestimmte Klasse hat nicht?

„Link 1“ wird noch durch sinnvolle und unterschiedliche(!) Linktitel ersetzt?

Klar, da steht später der Name. Mit Link1 weiß ja kein Mensch was sich dahinter verbirgt?

Was soll da passieren? Wird zu einer anderen Seite gegangen? Wenn nein, ist a falsch und du möchtest buttons verwenden.

Nein, es soll keine neue Seite aufgerufen werden sondern eine Aktion auf der gleichen Seite ausgeführt werden, wie z.B. das Löschen

$stmt = $mysqli->prepare("DELETE FROM grunddaten WHERE id=?");
$stmt->bind_param("s", $_GET["delete"]);
$stmt->execute();
$stmt->close();

Bis bald! Meowsalot (Bernd)

[Matthias Apsel]

Hallo Meowsalot,

Nur so aus Interesse könnte man auch sagen nehme alle Spalten nur die, die eine bestimmte Klasse hat nicht?

Achtung Wortspiel: :not.

Bis demnächst
Matthias

[Meowsalot]

Hallo Matthias,

danke!

Bis bald!
Meowsalot (Bernd)

[Gunnar Bittersmann]

@@Matthias Apsel

Nur so aus Interesse könnte man auch sagen nehme alle Spalten nur die, die eine bestimmte Klasse hat nicht?

Achtung Wortspiel: :not.

Willst du damit sagen, dies wäre kein Wortspiel? 🤔

LLAP 🖖

[Tabellenkalk]

Hallo,

Willst du damit sagen, dies wäre kein Wortspiel? 🤔

auf jeden Fall ist es keine Pfeife!

Gruß
Kalk

[dedlfix]

Tach!

Nein, es soll keine neue Seite aufgerufen werden sondern eine Aktion auf der gleichen Seite ausgeführt werden, wie z.B. das Löschen

$stmt = $mysqli->prepare("DELETE FROM grunddaten WHERE id=?");
$stmt->bind_param("s", $_GET["delete"]);
$stmt->execute();
$stmt->close();

Sehe ich das richtig, dass du mit GET-Requests datenändernde Operationen ausführen möchtest? Frag mal einen Bot, was der beim Finden von Links tut. Folgen zieht da ungewollte Folgen nach sich. Unabhängig davon, wie du die Aktion auslöst, wenn Daten zu ändern sind, sollte das über POST (oder PUT oder DELETE, aber nicht mit GET) erfolgen, denn da sind die Bots vorsichtig und rufen solche Aktionen in der Regel nicht auf. GET sollte man nur für Requests nehmen, die unter Verwendung derselben URL (inklusive Parameter) wiederholbar sind und dabei dasselbe Ergebnis liefern.

dedlfix.

[Meowsalot]

Hallo Gunnar,

☞ Beispiel

ich sehe in deinem Beispiel zwei Links wenn ich auf den Link oder einfach irgendwo hin klicke komme ich immer auf die gleiche Seite und warum ist der komplette Bereich verlinkt? Oder versteht diese Technik mein Google Chrome nicht?

EDIT: Ok du hast es in deinem Beispiel geschrieben dass es nur im Firefox geht. Also leider keine Option für mich.

Bis bald!
Meowsalot (Bernd)

[marctrix]

Hej Meowsalot,

EDIT: Ok du hast es in deinem Beispiel geschrieben dass es nur im Firefox geht. Also leider keine Option für mich.

Und eine JavaScript-Variante nachgereicht, die in jedem Browser geht…

Marc

[Meowsalot]

Hallo marctrix,

danke für die Infos. Gerade gefunden:
https://codepen.io/gunnarbittersmann/pen/QmGPOr

Es wurde hier so viel geschrieben ich muss alles durchlesen ob ich nichts wichtiges verpasst habe.

Bis bald!
Meowsalot (Bernd)

[dedlfix]

Tach!

☞ Beispiel

Nachtrag: Funktioniert gegenwärtig aber trotzdem weder in Edge, IE, Safari, Chrome, …; sondern nur im Firefox.

Funktioniert auch im Firefox nicht, wenn man zum Funktionieren dazuzählt, Text markieren zu können. Bei der Javascript-Lösung geht das zwar grundsätzlich, jedoch prinzipbedingt hakelig, weil der Link seiner Aufgabe nachzukommen versucht, wenn man die Maustaste auf der Fläche loslässt. Außerhalb loslassen geht, aber man muss da schauen, wo es ein "außerhalb" gibt, das nicht zum Beispiel durch eine benachbarte Fläche dieser Art belegt wird.

dedlfix.