Kontextmenü: nach Auswahl Eintrag in eine Tabelle

keine Ahnung!! aber die Hintergrundfarbe wird nicht geändert! Und die Funktion bricht an dieser Stelle immer ab******

Baumi Manuel hat gesagt.:
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****
Zum Vergrößern anklicken....

DIE LÖSUNG IST:
HTML: 
function xwrite(id,wert) {
	
document.getElementById(id).firstChild.nodeValue = wert;
document.getElementById(id).style.backgroundColor = '#990000';

document.getElementById('menu').style.display = 'none';
}
 
Was mir gerade aufgefallen ist: bei deinen drei Aufrufen der Funktion xwrite() übergibst du jedesmal als erstes Argumente eine Variable namens zelle, die jedoch an diesen Stellen nicht definiert ist ... oder täusche ich mich da?
 
einfach nur crack hat gesagt.:
Was mir gerade aufgefallen ist: bei deinen drei Aufrufen der Funktion xwrite() übergibst du jedesmal als erstes Argumente eine Variable namens zelle, die jedoch an diesen Stellen nicht definiert ist ... oder täusche ich mich da?
Zum Vergrößern anklicken....

Sehr aufmerksam gelesen! ;-)

in meinem script hab ichs schon definiert!! beim übertragen in meinen beitrag is mir die scheinbar verlohren gegangne!!

Vielleicht hilft meine aktuelle Erkenntnis:

folgendes habe ich gerade im IE ausprobiert:
hab mir in einem eigenen DIV die aktuelle Maus Position "live" darstellen lassen und gemerkt, dass wenn ich in meine Tabelle klicke um das Menü zu öffnen diese Tabelle ja ganz woanders erscheint als gleich neben dem Mauszeiger! wenn ich mit der Maus dann auf das Menü darüber fahre mir das Maus Position Live DIV von den Werten her zu beurteilen die richtige Werte anzeigt! Sobald ich aber aus dem Menü wieder raus fahre mit der Maus ganz andere Werte da stehen.

ein Beispiel:

das Menü sollte auf Position: Leftt:260 Top:270 angezeit werden
in wirklichkeit es aber auf Position Left: 106 Top: 34 steht
sobald ich mit der Maus auf das Menü komme zeigt es folgende werte an: Left: 270 Top:250


ich habe die Seite mit mehreren DIVs gebaut! Kann das der Grund sein****
Kann ich beim Aufrufen dem Menü genau sagen in welchen DIV es angezeigt werden soll****
 
Du wolltest zwar keine SELECT-Box aber hier trotzdem nochmal ein Beispiel wo eine verwendet wird.
Dadurch das die Liste innerhalb eines "zu kleinen" DIV-Containers steht, sieht man im Grunde nicht von ihr. Erst wenn man die Zelle anklickt, geht die Liste auf. Das restliche Aussehen solltest du mit CSS nach deinen Wünschen gestallten können.


CSS: 
<style type="text/css">
.div
	{
		overflow: hidden;
		width: 50px;
	}
.liste
	{
		width: 80px;
 		border-width: 0px;
		border-style: none;
	}

</style>

Javascript: 
<script language="javascript" type="text/javascript">
function td (id) {
var akt = "";
akt = document.getElementById(id).innerHTML;

var html = "";

if (akt == " " || akt == "&nbsp;") {
	html = "<div class='div'><select class='liste' id='liste' onblur='change(" + id +");'><option value='&nbsp;' selected></option><option value='TD'>TD</option><option value='ND'>ND</option></select></div>";
	document.getElementById(id).innerHTML = html;
} else if (akt == "TD") {
	html = "<div class='div'><select class='liste' id='liste' onblur='change(" + id +");'><option value='&nbsp;'></option><option value='TD' selected>TD</option><option value='ND'>ND</option></select></div>";
	document.getElementById(id).innerHTML = html;
} else if (akt == "ND") {
	html = "<div class='div'><select class='liste' id='liste' onblur='change(" + id +");'><option value='&nbsp;'></option><option value='TD'>TD</option><option value='ND' selected>ND</option></select></div>";
	document.getElementById(id).innerHTML = html;
}

document.getElementById("liste").focus();
}

function change(id) {
	document.getElementById(id).innerText = document.getElementById("liste").value;
}

</script>

HTML: 
<table border="1" cellpadding="2">
	<tr>
		<td width="50" id="1" onclick="td(1);">ND</td>
		<td width="50" id="2" onclick="td(2);">TD</td>
		<td width="50" id="3" onclick="td(3);">&nbsp;</td>
		<td width="50" id="4" onclick="td(4);">ND</td>
		<td width="50" id="5" onclick="td(5);">ND</td>
	</tr>
	<tr>
		<td id="6" onclick="td(6);">&nbsp;</td>
		<td id="7" onclick="td(7);">ND</td>
		<td id="8" onclick="td(8);">ND</td>
		<td id="9" onclick="td(9);">TD</td>
		<td id="10" onclick="td(10);">TD</td>
	</tr>
	<tr>
		<td id="11" onclick="td(11);">TD</td>
		<td id="12" onclick="td(12);">TD</td>
		<td id="13" onclick="td(13);">&nbsp;</td>
		<td id="14" onclick="td(14);">TD</td>
		<td id="15" onclick="td(15);">ND</td>
	</tr>
</table>
 
Hey!

Die Lösung von dir tombe ist vielleicht gar nicht so schlecht! Danke!
Ist wahrscheinlich die Einfachste Lösung des Problems! Und die weiterverarbeitung ist wahrscheichlich dann auch einfacher!
 
Hat halt leider den Nachteil das man die Zelle immer zweimal anklicken muss damit sich die Liste auch wirklich öffnet.

Aber soweit ich weiß gibt es keine Möglichkeit dies per JS zu lösen.
 
ja stimmt, aber das ist gar nicht so schlimm! dein script ist schon ziemlich bneutzerfreundlich!


aber ich stehe an einem anderen problem an:
micht stöhrt, dass das select feld nach der Änderung noch da steht!!
ich möchte das der TD grüne Hintergrundfarbe besitzt
der ND eine rote Hintergrundfarbe
und wenn "" ausgewählt wurde die Hgfarbe lightgray ist!!

mit document.getElementById(id).style.backgroundColor = 'lightgrey'; funkt das nicht so wie ich mir das gedacht habe!


PHP: 
function change(id) {

if (document.getElementById("liste").value =='T')
{
	document.getElementById(id).style.backgroundColor = '#3C3';
	document.getElementById(id).innerText = document.getElementById("liste").value;
}
if (document.getElementById("liste").value =='N')
{
	document.getElementById(id).style.backgroundColor = '#FF3333';
	document.getElementById(id).innerText = document.getElementById("liste").value;
}
if (document.getElementById("liste").value =='' || document.getElementById("liste").value =="&nbsp;")
{
	document.getElementById(id).style.backgroundColor = 'lightgrey';
	document.getElementById(id).innerText = document.getElementById("liste").value;
}

}
 
Ich habe dein Beispiel noch ein wenig ausgebessert. Leider funktioniert momentan das mit dem Blur-Ereignis nicht:
Code: 
var selection = function (event) {
  var current = event.srcElement.innerHTML;
  var html    = '';
  if(current == 'TD') {
    html = '<div class="div"><select class="liste" id="liste"><option value="&nbsp;"></option><option value="TD" selected="selected">TD</option><option value="ND">ND</option></select></div>';
  } else if(current == 'ND') {
    html = '<div class="div"><select class="liste" id="liste"><option value="&nbsp;"></option><option value="TD">TD</option><option value="ND" selected="selected">ND</option></select></div>';
  } else {
    html = '<div class="div"><select class="liste" id="liste"><option value="&nbsp;" selected="selected"></option><option value="TD">TD</option><option value="ND">ND</option></select></div>';
  }
  event.srcElement.innerHTML = html;
};

var change_action = function (event) {
  event.srcElement.innerHTML = document.getElementById('liste').value;
};

var a = document.getElementById('table-selection').childNodes.length;
for(var i = 0; i < a; ++i) {
  var b = document.getElementById('table-selection').childNodes[i].childNodes.length;
  for(var j = 0; j < b; ++j) {
    if(document.addEventListener) {
      document.getElementById('table-selection').childNodes[i].childNodes[j].addEventListener('click', selection, false);
      document.getElementById('table-selection').childNodes[i].childNodes[j].addEventListener('blur', change_action, false);
    } else if(document.attachEvent) {
      document.getElementById('table-selection').childNodes[i].childNodes[j].attachEvent('onclick', selection);
      document.getElementById('table-selection').childNodes[i].childNodes[j].attachEvent('onblur', change_action);
    }
  }
}
HTML: 
<table id="table-selection" border="1" cellpadding="2">
  <tr>
    <td width="50">ND</td>
    <td width="50">TD</td>
    <td width="50">&nbsp;</td>
    <td width="50">ND</td>
    <td width="50">ND</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>ND</td>
    <td>ND</td>
    <td>TD</td>
    <td>TD</td>
  </tr>
  <tr>
    <td>TD</td>
    <td>TD</td>
    <td>&nbsp;</td>
    <td>TD</td>
    <td>ND</td>
  </tr>
</table>?????????
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück