Kann eine Tabelle zeilenweise selektiert werden

[piet]

Hallo,

ich habe eine Tabelle mit 10 Spalten. Zum besseren lesen und durchblättern wäre es günstig wenn ein Balken der sich über alle Spalten zieht (also Zeilenweise) durch die Tabelle gefahren werden kann. (z.B. mit Cursor AUF/AB) So als ob die ganze Zeile selektiert wäre.

Geht so etwas und wenn dann wie ??

Danke
             piet

[Ashura]

puts "Hallo " + gets.chomp + "."

?> piet
=> Hallo piet.

ich habe eine Tabelle mit 10 Spalten. Zum besseren lesen und durchblättern wäre es günstig wenn ein Balken der sich über alle Spalten zieht (also Zeilenweise) durch die Tabelle gefahren werden kann. (z.B. mit Cursor AUF/AB) So als ob die ganze Zeile selektiert wäre.

Ich habe den Text ca. zehmal durchgelesen und es wirklich versucht, aber: Hä?

Kannst du dein Gesuch bitte noch einmal verständlicher formulieren? Danke.

Einen schönen Mittwoch noch.

Gruß, Ashura

[Gernot Back]

Hallo Ashura,

ich habe eine Tabelle mit 10 Spalten. Zum besseren lesen und durchblättern wäre es günstig wenn ein Balken der sich über alle Spalten zieht (also Zeilenweise) durch die Tabelle gefahren werden kann. (z.B. mit Cursor AUF/AB) So als ob die ganze Zeile selektiert wäre.

Ich glaube, ich verstehe es: Piet möchte, dass sich beim Überfahren mit der Maus das TR-Element mit einer speziellen Hintergrundfarbe bzw. einem Border darstellt. Das ginge in modernen Browsern mit der CSS-Pseudoklasse Hover in Bezug auf das TR-Element. Da Piet es aber bestimmt auch gerne im IE hätte, muss er die Style-Eigenschaften des TR-Elements dort mit Javascript ändern.
Wenn er die Selektion über die Tasten AUF und AB haben will, wird es allerdings noch komplizierter und das ist dann sowieso in keinem Browser mehr mit bloßem CSS zu realisieren.

Gruß Gernot

[Ashura]

puts "Hallo " + gets.chomp + "."

?> Gernot
=> Hallo Gernot.

Ich glaube, ich verstehe es: Piet möchte, dass sich beim Überfahren mit der Maus das TR-Element mit einer speziellen Hintergrundfarbe bzw. einem Border darstellt.

Aha, danke.

Das ginge in modernen Browsern mit der CSS-Pseudoklasse Hover in Bezug auf das TR-Element. Da Piet es aber bestimmt auch gerne im IE hätte, muss er die Style-Eigenschaften des TR-Elements dort mit Javascript ändern.

Genau. Seine Anhaltspunkte sind :hover und die Beispiele von SelfHTML.

Wenn er die Selektion über die Tasten AUF und AB haben will, wird es allerdings noch komplizierter und das ist dann sowieso in keinem Browser mehr mit bloßem CSS zu realisieren.

Wenn tr den Fokus der Tastatur erhalten könnte schon, aber so wohl eher nicht, da hast du Recht.

Einen schönen Mittwoch noch.

Gruß, Ashura

[Marian]

Hi piet,

ich weiß zwar auch nicht, was du willst, aber vielleicht hilft dir http://aktuell.de.selfhtml.org/artikel/javascript/scrolltabelle/?

Gruß, Marian

[Cybaer]

Hi,

ich habe eine Tabelle mit 10 Spalten. Zum besseren lesen und durchblättern wäre es günstig wenn ein Balken der sich über alle Spalten zieht (also Zeilenweise) durch die Tabelle gefahren werden kann. (z.B. mit Cursor AUF/AB) So als ob die ganze Zeile selektiert wäre.

In kürzester Form:
<tr onMouseOver="this.style.backgroundColor='red';">

Gruß, Cybaer

[Gernot Back]

Hallo Cybaer und die anderen,

ich habe eine Tabelle mit 10 Spalten. Zum besseren lesen und durchblättern wäre es günstig wenn ein Balken der sich über alle Spalten zieht (also Zeilenweise) durch die Tabelle gefahren werden kann. (z.B. mit Cursor AUF/AB) So als ob die ganze Zeile selektiert wäre.

In kürzester Form:
<tr onMouseOver="this.style.backgroundColor='red';">

Ich habe auch gerade mal einen Lösungsansatz versucht, wie man es mit den Cursor-Auf- und -Ab-Tasten steuern könnte. Leider bleibt er für IE bereits im Ansatz stecken: In Mozilla und Opera haben diese Tasten ja den Keycode 38↑ bzw. 40↓, aber seltsam: im IE lassen sich die Tasten im Steuerungsblock anders als im alphanumerischen und im numerischen Block anscheinend nicht auslesen. Weißt du oder jemand anders eine Lösung?

So habe ich es -wie gesagt im IE leider erfolglos- probiert:

  
function welche (e) {  
  var e = e || window.event;  
  var taste = e.which || e.keyCode;  
    if(e.preventDefault) {  
      e.preventDefault();  
    } else {  
      e.returnValue=false;  
    }  
    alert(taste);  
}  
  
if (window.captureEvents) {  
  window.captureEvents(Event.KEYPRESS);  
  window.onkeypress=welche;  
} else {  
  document.onkeypress=welche;  
}  

Gruß Gernot

[Gernot Back]

Hallo nochmal,

Heureka!

function welche (e) {
  var e = e || window.event;
  var taste = e.which || e.keyCode;
    if(e.preventDefault) {
      e.preventDefault();
    } else {
      e.returnValue=false;
    }
    alert(taste);
}

if (window.captureEvents) {
  window.captureEvents(Event.KEYPRESS);
  window.onkeypress=welche;
} else {
  document.onkeypress=welche;

// Falscher Eventhandler: Mit onkeydown funktioniert das auch im IE:
     document.onkeydown=welche;

//jetzt kann ich ja weiterarbeiten ;-)

}

  
Gruß Gernot

[Cybaer]

Hi,

Ich habe auch gerade mal einen Lösungsansatz versucht, wie man es mit den Cursor-Auf- und -Ab-Tasten steuern könnte.

Hmm, ich finde es schon im Ansatz *nicht* sinnvoll (vorsichtig formuliert), Tasten mit denen ich *alle* Browser sowie sonstige *beliebige* Software steuere (sowohl was das Scrolling, als auch was die Menüsteuerung über Tastatur angeht!) für mehr als fragwürdige Zwecke zu mißbrauchen. ==:-o

Sinnvoller wäre da IMHO Pfeilgrafiken für Mausbedienung und Tastaturkürzel wie u & d für up & down oder h & r für hoch & runter, oder wenn der Balken auch beim Scrollen automatisch in der Mitte des Viewports bliebe.

Ich meine, nur mal so als Anregung für deine anscheinend überschüssige Energie ... ;->

Gruß, Cybaer

[Gernot Back]

Hallo Cybaer,

Ich habe auch gerade mal einen Lösungsansatz versucht, wie man es mit den Cursor-Auf- und -Ab-Tasten steuern könnte.

Sinnvoller wäre da (...) wenn der Balken auch beim Scrollen automatisch in der Mitte des Viewports bliebe.

Ich meine, nur mal so als Anregung für deine anscheinend überschüssige Energie ... ;->

Zu spät, habe Ersteres unter Unterdrückung der Standardaktionen bereits umgesetzt. Aber da du mich schon ertappt hast, überlege ich mir jetzt mal was zu deiner anderen Anregung, müsste ja mit getComputedStyle bzw. currentStyle der Zeilenhöhe in Verbindung mit scrollBy() gehen.

;-)

Ach ja, die übliche Überprüfung der Methoden und Eigenschaften, zu der du mich immer ermahnst, müsste ich auch noch einbauen
Nach dem Motto: Arbeit ist genug da, man muss sie nur sehen!:

  
<!doctype html public "-//W3C//DTD HTML 4.0 //EN">  
<html>  
<head>  
<title>TableRowFocus mit Cursortaste</title>  
<meta name="author" content="Gernot Back">  
<meta name="generator" content="Ulli Meybohms HTML EDITOR">  
<style type="text/css">  
[code lang=css]  
html, body, form {  
  height:100%;  
  width:100%;  
  margin:0;  
  padding:0;  
}  
  
#meineTabelle {  
  height:100%;  
  width:100%;  
  border-collapse:collapse;  
}

</style>
<script type="text/javascript">

  
var virgin = true;  
var lauf = -1;  
var step;  
var zeilen;  
  
function init () {  
  zeilen=document.getElementById('meineTabelle').getElementsByTagName('TR');  
    if (window.captureEvents) {  
      window.captureEvents(Event.KEYPRESS);  
      window.onkeypress=laufen;  
    } else {  
      document.onkeydown=laufen;  
    }  
}  
  
function laufen (e) {  
  var e = e || window.event;  
  var taste = e.which || e.keyCode;  
  if((taste==38)||(taste==40)) {  
    if(e.preventDefault) {  
      e.preventDefault();  
    } else {  
      e.returnValue=false;  
    }  
    if(taste==38) {  
      if(virgin) {  
        step=zeilen.length;  
        virgin=false;  
      } else {  
        step=-1;  
        lauf+=zeilen.length;  
      }  
    } else {  
      step=1;  
    }  
    lauf+=step;  
    lauf%=zeilen.length;  
    for (i=0; i<zeilen.length; i++ ) {  
      if(i!=lauf) {  
        zeilen[i].style.background='';  
      } else {  
        zeilen[i].style.background='#DDEEFF';  
      }  
    }  
  }  
}  
  
window.onload=init;

</script>
</head>
<body>
<table id="meineTabelle">
<tr>
<td>In</td>
<td>jeglicherer</td>
<td>Zelle</td>
<td>jeder</td>
<td>Zeile</td>
<td>der</td>
<td>Tabelle</td>
<td>steht</td>
<td>etwas</td>
<td>anderes.</td>
</tr>
<!-- Hier folgen jetzt endlos viele Zeilen der gleichen Art -->
</table>
</body>
</html>
[/code]
Gruß Gernot

[Cybaer]

Hi,

Zu spät, habe Ersteres unter Unterdrückung der Standardaktionen bereits umgesetzt.

Oh je ... =;-)

BTW:

zeilen[i].style.background='';
        zeilen[i].style.background='#DDEEFF';

backgroundColor

Und wenn man innerhalb der Tabelle an den unteren Bereich des Viewports anlangt, könnte man doch eigentlich mit einem zeilenweisen Scrolling beginnen, oder? :)

Und wenn man durch ist, springen Markierung und ScrollPos wieder nach oben, bzw. dorthin, wo die Tabelle beginnt. :-)

Nach dem Motto: Arbeit ist genug da, man muss sie nur sehen!:

LOL - ich bin eindeutig zu hellsichtig! =;->

Gruß, Cybaer

[Gernot Back]

Hallo piet,

frag gerne hier noch mal nach und nicht dort:(nicht archivierter Thread), wenn du etwas nicht verstehst:

Hier werden alle geholfen!

Gruß Gernot