Kontextmenü: nach Auswahl Eintrag in eine Tabelle

Baumi Manuel

Baumi Manuel

Mitglied
Hallo Community!

Nachdem mir dieses Forum bzw diese Website schon sehr viel geholfen hat, ersuche ich jetzt erneut mal wieder um eure Hilfe:

Ich möchte euch erstmal meinen Sachverhalt erläutern:

ich habe eine dynamische Tabelle mit PHP generiert die in etwa wie folgt aussieht:

HTML: 
<table>
<tr>

<td>NAME</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>

</tr>
<tr>
<td>max mustermann</td><td></td><td>TD</td><td>ND</td><td></td><td>TD</td>
<tr>
<td>susi sammac</td><td></td><td>TD</td><td>ND</td><td></td><td>TD</td>
</tr><tr>
<td>jessy james</td><td></td><td>TD</td><td>ND</td><td></td><td>TD</td>
</tr><tr>
<td>andi arbeitslos</td><td></td><td>TD</td><td>ND</td><td></td><td>TD</td>
</tr>
</table>

in der Spalte NAME kommen untereinander alle mitarbeiter aufgelistet rein.
in den anderen spalten (horizontal) sind die tage eines monats drinnen (in meinem beispiel hier habe ich nur 5 Tage) . in diesen zellen werden bei jedem mitarbeiter entweder TD (für Tagdienst) und ND (für Nachtdienst) drinnen stehen.

ich würde jetzt gerne wenn ich auf eine zelle der tabelle klicke mit einem kontextmenü oder alertbox auswählen können ob TD oder ND und bei bestätigung, dass dieser eintragn in genau der angeklickten zelle eingefügt wird! wenn aber keine TD und ND mehr im "Pool" verfügbar sind (der Mitarbeiter also bereits alle notwendigen dienste eingeteilt hat) kann man auch nix mehr auswählen.

(ich hoffe das war hablwegs verständlich erklärt)


der PHP Teil ist kein Problem! Aber mit JavaScript happerts bei mir noch ordentlich!! :-)

ich weiß bereits, dass ich ein onklick verwenden muss um eine javascript funktion zu starten. aber wie bekomme ich 1. so ein kontextmenü / alertbox in der man den TD oder ND auwählen kann und 2. wie bekomme ich die auswahl dann genau in die Zelle der Tabelle rein**** Mach ich das mit lauter <input type="text"> elementen****


Bemerkung in eigener Sache: Bitte ich erwarte keine fertigen Scripte!! Ich würde mich mehr darüber freun wenn ihr mir dabei helft es selber zu entwickeln! dann ist für mich der Lernerfolg da****** :-)
Danke!!
 
Hey!
Dank Google habe ich jetzt etwas gebasselt das eigentlich soweit funkt, solange man es nicht im IE ausprobiert! Könnt ihr mir helfen diesen Code noch im IE zum laufen zu bringen!?


der JavaScript Teil:
HTML: 
var mausleft;
var maustop;

var docEl = (typeof document.compatMode != "undefined" && 
                  document.compatMode        != "BackCompat"
                  )? "documentElement" : "body";

function init_mousemove() {
    if(document.layers) document.captureEvents(Event.MOUSEMOVE);
    document.onmousemove =	dpl_mouse_pos;
}

function dpl_mouse_pos(e) {

   var xPos    =  e? e.pageX : window.event.x;
   var yPos    =  e? e.pageY : window.event.y;

	
   if (document.all && !document.captureEvents) {
	    xPos    += document[docEl].scrollLeft;
	    yPos    += document[docEl].scrollTop;
    }
    

    document.feld.ausg.value    =  "Left = " + xPos + " : Top = " + yPos;
	mausleft = xPos;
	maustop = yPos;

    
    
     if (document.layers) routeEvent(e);
}


var zelle = '';

function xwrite(id,wert) {
	
document.getElementById(id).firstChild.nodeValue = wert;
document.getElementById('menu').style.display = 'none';
}

function aufklappen(){
	document.getElementById('menu').style.display = 'block';
	zelle = '';
	id ='';
}

function zuklappen(){
	document.getElementById('menu').style.display = 'none';
}


function gleicheintragen (id) {

	if (id!='')
    	{
    		document.getElementById('menu').style.top = maustop + 'px';
    		document.getElementById('menu').style.left = mausleft + 'px';
		document.getElementById('menu').style.display = 'block';
		
		zelle = id;
		id ='';
    	}
	else
	{ 
		document.getElementById('menu').style.display = 'none';
	}
}


CSS:
HTML: 
#menu {
	display:none;
	background-color:#C9C;
	position:absolute;
}


und der PHP bzw HTML Code:
PHP: 
echo "<body onload=\"init_mousemove()\" id=\"top\" >";

<table width="80%" border=1>
<tr><td id="zelle1" onClick="javascript:gleicheintragen('zelle1');">&nbsp;</td><td>irgendwas</td></tr>
<tr><td id="zelle2" onClick="javascript:gleicheintragen('zelle2');">&nbsp;</td><td>irgendwas2</td></tr>

</table>




<div id="menu">
<table  border="1">
<tr>
<td onClick="javascript:xwrite(zelle,'TD');">TD</td>
</tr>
<tr>
<td onClick="javascript:xwrite(zelle,'ND');">ND</td>
</tr>
<tr>
<td onClick="javascript:xwrite(zelle,'');">löschen</td>
</tr>
</table>
</div>



im Firefox funktioniert das eigentlich sehr gut! beim klick auf das jeweilige Feld öffnet sich gleich daneben das kontextmenü (<div id="menu">!!
warum aber nicht im IE!

wobe zu erwähnen sei: als ich den code alleine, also wirklich nur diese zeilen ausprobiert habe, klappte es! aber eingefügt in mein ganzes Projekt klappts nicht! kann das was mit meinen mehreren DIV-Elementen zu tun haben?

Bitte um Hilfe******


---->> Nachtrag:
Die Maus Position richtig ermitteln tut das Script scheinbar! Ich hab mir die Positionen im IE mal ausgeben lassen! Aber das DIV fügt er mir nicht dort an dieser Position ein! Sondern ganz wo anders******!!

ComFreek hat gesagt.:
Hallo Baumi Manuel,

mein Vorschlag wäre, dass wenn der Benutzer auf die Zelle klickt, eine Select-Box zur Auswahl erscheint.
Ein kleines Beispiel: http://jsfiddle.net/McbcY/

Die Daten zu den einzelnen Mitarbeitern kannst du als JavaScript-Arrays speichern.
Zum Vergrößern anklicken....


Danke für deine Hilfe! Aber leider gefällt mir die Lösung mit dem Select optisch nicht so besonders! ist aber wahrscheinlich die einfachste Lösung!

Thanx!
 
Ich vermute mal, dass du momentan das Problem hast, dass die Auswahlfläche vom Aussehen her sich sehr von dem Fließtext, der davor an dieser Stelle war, unterscheidet. Deshalb könntest du die Auswahlfläche so anpassen, dass sie quasi wie der Fließtext aussieht, nur, dass eben rechts neben dem Text ein Pfeil auftaucht, der andeutet, dass es sich nun um eine Auswahlfläche handelt. Somit würde sich dein Seitenaufbau nicht verschieben und es würde nicht direkt auffallen, dass es sich dabei um Auswahlflächen handelt.
 
wenn ich das richtig verstanden habe meinst du, dieses kleine menü das angezeigt wird wenn ich auf die zelle in der tabelle klicke!
falls ja: nein ich habe diesem menü (was eigentlich eine kleine tabelle ist) farblich so formatiert, dass es gut zum gesamtbild passt!)

mein problem ist das, dass wenn ich im IE auf eine zelle klicke in der ich den text ändern will, dieses menü irgendwo auf der seite auftaucht und nicht gleich neben dem mauszeiger! wobei im firefox das menü aber genau neben dem mauszeiger erscheint (so wie ich es auch haben will)
hast du eine idee woran das liegen kann****
 
*gg* ok! Jetzt hab ichs verstanden!! ^^

noch eine Frage hats sich mir gerade aufgetan:

HTML: 
function xwrite(id,wert) {

	
document.getElementById(id).firstChild.nodeValue = wert;
document.getElementById(id).firstChild.style.backgroundColor = '#FFFFFF';

document.getElementById('menu').style.display = 'none';
}

wieso ist die Zeile zum Hintergrundfarbe ändern nicht korrekt****
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück