Tabelle mit nur einer markierbaren Spalte

Druckbare Version

01-06-2010, 09:19
Molaf

Tabelle mit nur einer markierbaren Spalte

Hallo allerseits,

ich möchte gerne Daten in HTML ausgeben.
Dazu sortiere ich alles ein eine dreispaltige Tabelle.
Die linke Spalte gibt Zeilennummer oder Labels an, die rechte Kommentare oder Formeln. Die eigentlichen Daten sind in der mittleren Spalte.

Ich möchte das HTML nun soweit anpassen, dass man einfach mit der Maus einige Zeilen markieren und die Daten dann mit Cut&Paste weiterverarbeiten kann. Dabei soll nur die mittlere Spalte markiert werden, sonst muss man nachher alles mit einem Texteditor von Hand nacharbeiten und von dem Text der linken und rechten Spalte trennen.

Mir fällt keine Möglichkeit ein, wie in mit HTML oder CSS so etwas realisieren könnte.

Gibt es so eine Möglichkeit?

Gruß,
Molaf
01-06-2010, 15:14
msi

für browser, die sich an stadards halten kannst du es einfach so machen:

HTML-Code:

<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <style type="text/css"> #w { border:2px solid black; padding-left:100px; padding-right:200px; position:relative; } #w p,label { margin:0; border-bottom:1px solid black; padding: 2px 4px; } #w p { border-left: 1px solid black; border-right:1px solid black; } #w label { display:block; position:absolute; overflow:hidden; background-color:#ccc } #w label.left { left:0; width:92px; } #w label.right { right:0; width:192px; } </style> </head> <body> <div id="w"> <p id="e1">Das ist Eintrag 1.Das ist Eintrag 1.Das ist Eintrag 1.Das ist Eintrag 1.Das ist Eintrag 1.Das ist Eintrag 1.Das ist Eintrag 1.Das ist Eintrag 1.</p> <p id="e2">Das ist Eintrag 1.Das ist Eintrag 1.Das ist Eintrag 1.Das ist Eintrag 1.Das ist Eintrag 1.Das ist Eintrag 1.Das ist Eintrag 1.Das ist Eintrag 1.</p> <p id="e3">Das ist Eintrag 1.Das ist Eintrag 1.Das ist Eintrag 1.Das ist Eintrag 1.Das ist Eintrag 1.Das ist Eintrag 1.Das ist Eintrag 1.Das ist Eintrag 1.</p> <label class="left" for="e1">Zeile1</label> <label class="right" for="e1">Zeile1</label> <label class="left" for="e2">Zeile2</label> <label class="right" for="e2">Zeile2</label> <label class="left" for="e3">Zeile3</label> <label class="right" for="e3">Zeile3</label> </div> </body> </html> <script type="text/javascript"> function updatePosition(wrapper) { $(wrapper).find('label').each( function() { $for = $( '#'+ $(this).attr('for') ); var offset = $for.position(); $(this).css('top',offset.top); $(this).height( $for.height() ); }); } $(function() { updatePosition( $('#w') ); $(window).resize( function() { updatePosition( $('#w') ); } ); }); </script>

vom ie ist das boxmodel ein bisschen kaputt, da musst halt dann noch von hand nachbesser, wenn der auch unterstützt werden soll.
Das betrifft dann aber nur die positionierungen.
02-06-2010, 07:43
Molaf

Danke zuerst mal, es funktioniert.

Woran genau liegt es denn?
Erst habe ich display:block vermutet, aber das ist es nicht. Ich sehe gar nicht, woran sich die Spalten so eindeutig unterscheiden, dass zwei davon nicht markierbar sind...

Liegt es am label-tag?

Ich habe grad dieses ungute Zug-verpaßt-Gefühl, mir leuchtet einfach nicht ein warum es klappt. Einzelne Elemente in ein Beispiel-html extrahiert und es stellt sich der alte, ungenügende Zustand ein.

Gruß,
Molaf
02-06-2010, 18:39
msi

Zitat:

Zitat von Molaf

Danke zuerst mal, es funktioniert.

Woran genau liegt es denn?
Erst habe ich display:block vermutet, aber das ist es nicht. Ich sehe gar nicht, woran sich die Spalten so eindeutig unterscheiden, dass zwei davon nicht markierbar sind...

Liegt es am label-tag?

Ich habe grad dieses ungute Zug-verpaßt-Gefühl, mir leuchtet einfach nicht ein warum es klappt. Einzelne Elemente in ein Beispiel-html extrahiert und es stellt sich der alte, ungenügende Zustand ein.

Gruß,
Molaf

das entscheidende ist die position im dom. die spalten sind nämlich sehr wohl markierbar, allerdings werden sie erst nach der ganzen mittleren spalte markiert, da sie ja auch erst danach im html code geschrieben sind.

das ganze css und javascript ist nur nötig um dann noch eine formatierte tabelle zu erhalten, vllt gibts da auch eine geschicktere lösung..