# Tabellenfelder markieren



## daywalkertp (10. April 2003)

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!


----------



## Maximus (10. April 2003)

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


----------



## Valentin- (10. April 2003)

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.


----------



## Andreas Gaisbauer (10. April 2003)

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


----------



## daywalkertp (11. April 2003)

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.


----------



## derGugi (11. April 2003)

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


----------



## daywalkertp (11. April 2003)

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:

```
function selekt(id)
	{
	id.bgColor='#336699'; 
	}
```

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


```
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???


----------



## derGugi (11. April 2003)

was bringt das, wenn du "ID" übergiebst??? du musst 'Zelle1' übergeben!

edit: hier noch ein beispielcode:

```
<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.


----------



## Fabian H (11. April 2003)

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 )


----------



## Fabian H (11. April 2003)

So hier der versprochene Code (ist zwar nicht perfekt, aber geht):

```
<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 

[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.


----------



## derGugi (11. April 2003)

so, ich hab mir schnell erlaubt, das problem zu lösen 
hier der code(danke an nuinmundo für die idee, obwohl ich eigentlich die selbe hatte, nur nicht mit variablen ;-))

```
<html>
<head>
<title>asfd</title>
<script type="text/javascript">
<!--
var pressed;
var farbe;
function einfaerben(id,status) {
if (status != "move") {
	if (document.getElementById(id).style.backgroundColor == "")
		farbe= "#000";
	else
		farbe = "";
}
if (status == "pressed")
	pressed = true;
else if(status == "up")
	pressed = false;
if (pressed) {
	document.getElementById(id).style.backgroundColor = farbe;
}
}
//-->
</script>
</head>
<body onMouseUp="pressed=false">
<table width="100%" border="1">
<tr>
<td id="1" onMouseDown="javascript:einfaerben(this.id,'pressed')" onmousemove="einfaerben(this.id,'move')" onMouseUp="einfaerben(this.id,'up')">asf</td>
</tr>
<tr>
<td id="2" onMouseDown="javascript:einfaerben(this.id,'pressed')" onmousemove="einfaerben(this.id,'move')" onMouseUp="einfaerben(this.id,'up')">dsafasdfjksafj </td>
</tr>
</table>
</body>
</html>
```

ach ja und javascript muss zusammen geschrieben werden!


----------



## derGugi (11. April 2003)

@nuinmundo:
was funzt denn ned?? du musst einfach javascript zusammenschreiben oder halt weglassen, wie du gesagt hast(aber sowiel ich weiss sollte man es schon schreiben-->w3c). musst halt aufpassen, dass du in den zellen die maustaste loslässt  sonst muss man halt noch was schreiben, wo überprüft wird, ob die maus die tabelle verlassen hat. wenn ja wird pressed auf false gestellt und alle sind glücklich ;-)
edit: man kanns ja auch kompliziert machen... einfach noch im body tab <body onMouseUp="pressed=false"> eingeben und es funzt


----------



## daywalkertp (11. April 2003)

So, ich hab nun auch ein wenig am Code rumgespielt und bin zum folgenden ergebnis gekommen:

```
<html>
<head>
<title>asfd</title>
<script type="text/javascript">
<!--
var klick, geklickt;
klick = false;
function klick_activ(id,jein)
	{
	if (jein == 'ja'){
		if (geklickt == 1){leeren(4);}
		klick = true;
		window.document.getElementById(id).style.backgroundColor = "#FF0000";
		}
	else{
		klick = false;
		geklickt = 1;
		//window.document.getElementById(id).style.backgroundColor = "";
		}
	}
function test(id)
	{
	if (klick == true){
		if (window.document.getElementById(id).style.backgroundColor == ""){
			window.document.getElementById(id).style.backgroundColor = "#FF0000";}
		else{window.document.getElementById(id).style.backgroundColor = "#FF0000";}
		}
	}
function leeren(elemente)
	{
	var i;
	for (i=0;i<=elemente;i++){
		window.document.getElementById(i).style.backgroundColor = "";
		}
	}
//-->
</script>
</head>
<body onselectstart="return false">
<table width="400" border="1">
  <tr>
    <td id="0" onMouseDown="klick_activ(id,'ja');" onMouseUp="klick_activ(id,'nein');" onMouseOver="test(id);">&nbsp;</td>
  </tr>
  <tr>
    <td id="1" onMouseDown="klick_activ(id,'ja');" onMouseUp="klick_activ(id,'nein');" onMouseOver="test(id);">&nbsp;</td>
  </tr>
  <tr>
    <td id="2" onMouseDown="klick_activ(id,'ja');" onMouseUp="klick_activ(id,'nein');" onMouseOver="test(id);">&nbsp;</td>
  </tr>
  <tr>
    <td id="3" onMouseDown="klick_activ(id,'ja');" onMouseUp="klick_activ(id,'nein');" onMouseOver="test(id);">&nbsp;</td>
  </tr>
  <tr>
    <td id="4" onMouseDown="klick_activ(id,'ja');" onMouseUp="klick_activ(id,'nein');" onMouseOver="test(id);">&nbsp;</td>
  </tr>
</table>

</body>
</html>
```

Ich hab da aber noch eine *sehr sehr wichtige/s Frage/Problem: *
Kann ich die Tabellen mit den IDs auch fragen und vergleichen welchen Farbwert die Momentan haben? Ich hab das Probiert aber habs nicht gepackt. Der Sinn des ganzen ist ja, dass er das ganze Am Schluss auch auswertet z.B.: Eine for Schleife die die ganze Tabelle durchrennt und überprüft welches ne Farbe hat und welches nicht. Die mit Farbe werden dann weiter bearbeitet.


----------



## derGugi (11. April 2003)

```
if (document.getElementById(id).style.backgroundColor == "#ff0000")
```


----------



## daywalkertp (11. April 2003)

@DerGugi:
Ne klappt so irgendwie nicht!

```
<html>
<head>
<script type="text/javascript">
function test(id){
		if (document.getElementById(id).style.backgroundColor == "#ff0000")
		{
		alert("jaja, du hast da ne Farbe!");
		}
	}
</script>
</head>
<body onselectstart="return false">
<table width="400" border="1">
  <tr>
    <td id="1" bgcolor="#00CC99" onClick="test(id);">&nbsp;</td>
  </tr>
  <tr>
    <td id="2" onClick="test(id);">&nbsp;</td>
  </tr>
</table>
</body>
</html>
```


----------



## derGugi (11. April 2003)

sicher klappt das. ich sagte dir doch, du kannst nicht ID übergeben! du musst schon die Nummer oder den Wert übergeben, sonst weiss deine funktion gar nicht, welche zelle.

hier: <td id="1" bgcolor="#00CC99" onClick="test*('1')*"> </td>
oder <td id="1" bgcolor="#00CC99" onClick="test*(this.id)*"> </td>

edit: ah ja: und wie willst du mit diesem skript überhaupt schauen, ob es funzt??? du hast ja gar keine rote zelle!!!!!!!!
machs so:     <td id="1" style="background-color:#ff0000;" onClick="test(this.id)">sadf </td> 
oder nimm einfach mein code, den ich oben gepostet habe, der funktioniert!


----------



## daywalkertp (11. April 2003)

wer sagt das man ID nicht übergeben kann???? ID kann man übergen!
Ich habs doch vorher gemacht (!! siehe meinen Vorletzten Code !!)...

wie es aussieht kann man nur nicht überprüfen welchen Farbwert die Zelle hat.


----------



## derGugi (11. April 2003)

ja hast recht es geht sorry. aber schau nochmal mein post an, dort steht wies geht.
bye


----------



## daywalkertp (22. April 2003)

... aber dann müsste das ja funtzen: (BEI MIR KLAPPTS NICHT)


```
<html>
<head>
<script type="text/javascript">
function test(id)
	{
		if (document.getElementById(id).style.backgroundColor == "#ff0000")
		{
		alert("jaja, du hast da ne Farbe!");
		}
	}
</script>
</head>
<body onselectstart="return false">
<table width="400" border="1">
  <tr>
    <td id="0" bgcolor="#ff0000" onClick="test('0');">&nbsp;</td>
  </tr>
    <tr>
    <td id="1" bgcolor="#ff0000" onClick="test('1');">&nbsp;</td>
  </tr>
  <tr>
    <td id="2" bgcolor="" onClick="test('2');">&nbsp;</td>
  </tr>
</table>
</body>
</html>
```

Ähhh, brauche Hilfe!

EDIT: Kopiert euch mal diesen Code und versucht es mal bitte bei euch. Ich bin schon verzweifelt


----------



## Fabian H (22. April 2003)

```
<html>
<head>
<script type="text/javascript">
function test(id)
	{
		if (document.getElementById(id).style.backgroundColor == "#ff0000")
		{
		alert("jaja, du hast da ne Farbe!");
		}
	}
</script>
</head>
<body onselectstart="return false">
<table width="400" border="1">
  <tr>
    <td id="0" style="background-color:#ff0000;" onClick="test('0');">&nbsp;</td>
  </tr>
    <tr>
    <td id="1" style="background-color:#ff0000;" onClick="test('1');">&nbsp;</td>
  </tr>
  <tr>
    <td id="2" onClick="test('2');">&nbsp;</td>
  </tr>
</table>
</body>
</html>
```
So funzt es!
Der Fehler: Du hattest leere Zellen und du hast eine CSS-Eigenschaft ausgelesen, die du garnicht gesetzt hast.


----------



## daywalkertp (22. April 2003)

Wenn ich die Farbe einer Zelle mit alert ausgebe erhalte ich nix!
Keine Zahl, keinen Farbwert und keinen Namen.

Muss man die ausgabe vielleicht in einen anderen Typ umwandeln?
Ich hab das mal mit parseInt probiert, aber dann erhalte ich NaN(bedeutet wahrscheinlich Not any Number)
Wenn ich das ganze in String(blabla) ausgebe erhalte ich auch nix.
Kann man das Ding vielleicht in einen HEXTyp umwandeln oder was?


----------



## daywalkertp (22. April 2003)

@Nuinmundo

Jooooooo, HARD!
Danke


----------



## Fabian H (22. April 2003)

Und warum du bei der einen Zeil nichts ausgegeben kriegst:
Du hast ja gar keine Hintergrundfarbe definiert.


Bsp:

```
<html>
<head>
<script type="text/javascript">
function test(id)
	{
		if (document.getElementById(id).style.backgroundColor == "#ff0000")
		{
		alert("jaja, du hast da ne Farbe!");
		}
	    alert(document.getElementById(id).style.backgroundColor);
	}
</script>
</head>
<body onselectstart="return false">
<table width="400" border="1">
  <tr>
    <td id="0" style="background-color:#ff0000;" onClick="test('0');">&nbsp;</td>
  </tr>
    <tr>
    <td id="1" style="background-color:#ff0000;" onClick="test('1');">&nbsp;</td>
  </tr>
  <tr>
    <td id="2" onClick="test('2');">&nbsp;</td>
  </tr>
</table>
</body>
</html>
```


//Edit: Und Typenumwandlung geht nicht so: *String(123)* sondern so *(String)123*.


----------



## derGugi (22. April 2003)

@nuinmundo


> //Edit: Und Typenumwandlung geht nicht so: String(123) sondern so (String)123.


seit wann???? ich hab zwar nicht sehr viel ahnung von javascript aber das ist mit ziemlicher sicherheit totaler quatsch


----------



## daywalkertp (22. April 2003)

Dies ist wohl meine letzte und wichtigste Frage in diesem Thread:
Wie kann ich den Inhalt einer einzelnen Zelle rauslesen?
so?:

```
alert (window.document.getElementById('Zelle1').value);
```
Klappt natürlich nicht, aber wie geht das richtig?


----------



## Fabian H (22. April 2003)

@derGugi: Hast recht.
Allerdings erledigt das in jeder halbwegs guten Programmiersprachen immer der cast-Operator, welcher angewendet wird, wie ichs oben beschrieben hab.

Die Typumwandlung von JavaScript besteht abwer nur aus Funktionen und ist nicht Teil der Syntax.

//Edit: Und @daywalkertp:
Versuchs mal so:

```
alert (window.document.getElementById('Zelle1').innerHTML);
```


----------

