Tabellenfelder markieren

D

daywalkertp

Erfahrenes Mitglied
Hallo Jungs,

Also ich hab mir da so ne einfache 3*3 Tabelle erstellt. Und jetzt
will ich folgendes. Wenn ich mit der Maus über ein Tabellefeld fahre soll noch nichts passieren. Aber wenn ich draufklicke dann soll das Tabellendeld ne rote Farbe haben. Und wenn ich anschließend die Maus mit gedrückter Taste runterziehe sollen die anderen Tabellenfelder auch ne rote Farbe kriegen. Kann man das machen? Ich hab das mal selbst probiert, komme aber nicht an mein Ziel.
- Und das ganze sollte doch bitte in JavaScript und nicht in PHP sein -

THX
Hoffe ihr könnt mir helfen!
 
Also ich glaube mit PHP bist Du damit sowieso auf dem falschen Dampfer. Aber hast Du schonmal verucht es per CSS zu machen?
Das könnte eventuell gehen.

Gruß Maximus
 
ich würde dir Javascript empfehlen, weil PHP ServerSide ist und
sowas von vorne herein schon mal GAR nicht kann.
Aber mit Javascript müsste das durchaus gehen.
 
Hallo,

das wird schwierig... Soweit ich weis gibts keinen Handler der "onDrag" abfragt. Einzelne Zellen oder Zeilen (mit ein Bisschen Aufwand auch spalten) zu Markieren is OK - aber das mit dem ziehen wird schwer... warten wir mal auf Geist ;)

ciao
 
kann man diesen einzelnen Tabellenzellen keine Namen oder sowas ähnliches vergeben, damit man sie nicht immer mit "this" ansprechen muss. Oder muss man da vielleicht die Mauslokalität abfragen?
....hmmmmm.
 
doch klar du kannst ihnen eine id geben: <td id="zelle1"> und dann im javascript per document.getElementByID("zelle1").style.backgroundColor="green" die hintergrundfarbe ändern. im javascript gibt es sicherlich einen befehl, um den mausstatus abfragen zu können. dann sollte es nicht mehr so schwierig sein.

greez
gugi
 
Zuletzt bearbeitet:
Ok, ich hab da noch ein kleines Problem.
Den einzelnen Zellen hab ich jetzt eine id vergeben -> Zelle1, Zelle2 usw... die haben onClick="javascript:test(id)"

mein kleiner Code:
Code: 
function selekt(id)
	{
	id.bgColor='#336699'; 
	}

Wenn ich jetzt mein Proggi starte reagiert nix, er macht nix. Schreibe ich meinen Code so um:

Code: 
function selekt(id)
	{
	Zelle1.bgColor='#336699'; 
	}

Dann klappt das ja, aber nur die Zelle1 wird blau. Ich hab mal versucht mit alert(id); die id auszugeben und das klappt ja auch... was mach ich falsch???
 
was bringt das, wenn du "ID" übergiebst??? du musst 'Zelle1' übergeben!

edit: hier noch ein beispielcode:
Code: 
<html>
<head>
<title>asfd</title>
<script type="text/javascript">
<!--
function einfaerben(id) {
//HIER MUSS ÜBERPRÜFT WERDEN, OB DIE MAUSTASTE GEDRÜCKT WURDE
document.getElementById(id).style.backgroundColor = "#000";
}
//-->
</script>
</head>
<body>
<table width="100%" border="1">
<tr>
<td id="1" onClick="javascript:einfaerben(this.id)" onmousemove="einfaerben(this.id)">asf</td>
</tr>
<tr>
<td id="2" onClick="javascript:einfaerben(this.id)" onmousemove="einfaerben(this.id)">dsafasdfjksafj </td>
</tr>
</table>
</body>
</html>
du musst jetzt halt noch rausfinden, wie man den mausstatus in javascript überprüft. das weiss ich jetzt auch ned.
 
Zuletzt bearbeitet:
Zum eigentlichen Problem:
Es ist ja möglich, ein Drag'n'drop Element zu machen. Dürfte soweit kein Problem sein, hab ich auch schon geschafft.

Ein kleiner Ansatz wäre:
Wenn man über eines der Felder geht, wird eine Variable gesetzt, wenn man wieder runter geht, wird sie wieder entfernt.
So:
Body: Bei onMouseDown auch eine Variable setzen.
Body: onMouseMove: prüfen, welche Variablen gesetzt sind und dementsprechend die Hintergundfarben ändern.

Codebeispiel müsste folgen (wenn in meinre Rechnung kein Fehler drin war :))
 
So hier der versprochene Code (ist zwar nicht perfekt, aber geht):
PHP: 
<html>
<head>

<style type="text/css">

</style>

<script type="text/javascript">
var pressed = 0, z1o = 0, z2o = 0, z3o = 0, z4o = 0, z5o = 0, z6o = 0;

function checko() {
  if ((pressed == 1) && z1o == 1)
    window.document.getElementById("z1").style.backgroundColor = "#FF0000";

  if ((pressed == 1) && z2o == 1) {
    for (i=1; i<=2; i++) {
      window.document.getElementById("z"+i).style.backgroundColor = "#FF0000";
    }
  }

  if ((pressed == 1) && z3o == 1) {
    for (i=1; i<=3; i+=2) {
      window.document.getElementById("z"+i).style.backgroundColor = "#FF0000";
    }
  }

  if ((pressed == 1) && z4o == 1) {
    for (i=1; i<=4; i++) {
      window.document.getElementById("z"+i).style.backgroundColor = "#FF0000";
    }
  }

  if ((pressed == 1) && z5o == 1) {
    for (i=1; i<=5; i+=2) {
      window.document.getElementById("z"+i).style.backgroundColor = "#FF0000";
    }
  }

  if ((pressed == 1) && z6o == 1) {
    for (i=1; i<=6; i++) {
      window.document.getElementById("z"+i).style.backgroundColor = "#FF0000";
    }
  }

  if ((pressed == 0) || (z1o==0 && z2o==0 && z3o==0 && z4o==0 && z5o==0 && z6o==0)) {
    for (i=1; i<=6; i++) {
      window.document.getElementById("z"+i).style.backgroundColor = "#FFFFFF";
    }
  }
}

</script>

</head>
<body onMouseDown="pressed=1;checko();" onMouseUp="pressed=0;checko();" onMouseMove="checko();">

<table border=1 cellpadding=0 cellspacing=0 width=300 height=300>
  <tr>
    <td width=50% id="z1" onMouseOver="z1o=1;" onMouseOut="z1o=0;">&nbsp;</td>
    <td width=50% id="z2" onMouseOver="z2o=1;" onMouseOut="z2o=0;">&nbsp;</td>
  </tr>
  <tr>
    <td width=50% id="z3" onMouseOver="z3o=1;" onMouseOut="z3o=0;">&nbsp;</td>
    <td width=50% id="z4" onMouseOver="z4o=1;" onMouseOut="z4o=0;">&nbsp;</td>
  </tr>
  <tr>
    <td width=50% id="z5" onMouseOver="z5o=1;" onMouseOut="z5o=0;">&nbsp;</td>
    <td width=50% id="z6" onMouseOver="z6o=1;" onMouseOut="z6o=0;">&nbsp;</td>
  </tr>
</table>

</body>
</html>


[edit]Ich merk grad: Man kann es auch etwas vereinfachen, mal schaun, ob ich zamkrieg :rolleyes:

[edit2]K, wenn ichs auf meine Weise verinfach, dann zuckelt es. Vielleicht findet ja jemand anderes was einfacheres.

Und @einen Post unter mir: (derGugi)
Der Code funzt bei mir irgendwie net.
Und btw: Man braucht in den JavaScript-Handlern (OnMouseMove, onClick usw) nicht unbedingt ein javascript: davorschreiben.
 
Zuletzt bearbeitet von einem Moderator:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück