Kontextmenü: nach Auswahl Eintrag in eine Tabelle

So klappt es bei mir auch mit der Farbe:

Javascript: 
function change(id) {
var akt = document.getElementById("liste").value;

if (akt == "TD") {
	document.getElementById(id).style.backgroundColor = "#008000";
} else if (akt == "ND") {
	document.getElementById(id).style.backgroundColor = "#FF0000";
} else {
	document.getElementById(id).style.backgroundColor = "#808080";
}
	document.getElementById(id).innerText = akt;
	document.getElementById("liste").blur();
}

Jetzt noch bitte in der Liste "onblur" in "onchange" ändern!
 
Zuletzt bearbeitet:
Ääähhmmm... irgendwie versteh ich von dem code jetzt gar nichts!! :-(
fehlt da nicht irgendwo noch ein oncklick oda so?
könntest mir das bitte ein bisschen erklären****
 
Ich habe einfach jegliche Javascript-Bestandteile aus dem reinen HTML entfernt und ausgelagert. Die Ereignisse werden durch die Event-Listener hinzugefügt (siehe addEventListener und attachEvent – letzteres für den Internet Explorer).
 
Javascript: 
<script language="javascript" type="text/javascript">

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);
    }
  }
}



</script>


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




das funktioniert aber bei mir nicht!!
 
Das hätte ich mir auch denken können, denn zu der Zeit, zu der das Skript ausgeführt, existieren die HTML-Element noch nicht, und somit werden auch die Ereignisse nicht hinzugefügt.
Code: 
if(!document.addEventListener && document.attachEvent) {
  document.addEventListener = function (event, action) {
    document.attachEvent('on' + event, action);
  }
}

# ... oder document.addEventListener('DOMContentLoaded', function () { ... }, false);
# das wird aber nicht von allen Brausern unterstützt
document.addEventListener('load', function () {
  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);
      }
    }
  }
}, false);
 
ich habs gerade von Google auch gelesen: darf erst geladen werden wenn ges HTML code erfolgreich geladen wurde!

aber trotz allem funkt der code nicht bei mir!!

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />





<title>Untitled Document</title>
</head>

<body>

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



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

if(!document.addEventListener && document.attachEvent) {
  document.addEventListener = function (event, action) {
    document.attachEvent('on' + event, action);
  }
}
 

document.addEventListener('load', function () {
  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);
      }
    }
  }
}, false);

</script>

</body>

</html>
 
also im Firefox funkt das gar nicht!!

und im IE erscheinen zwar die Select Boxen beim draufklicken! Verschwinden aber sofort wieder! und man kann danach in dieser Zelle nichts mehr auswählen weil das SelectFeld jetzt ganz leer ist!! *confused*
Tritt bei dir der Fehler nicht auf****
 
Also im Chrome 17 läuft es, aber in meinem Firefox 11.0b leider auch nicht. Ich habe aber gerade keine Zeit das Problem genauer zu betrachten. Insofern nutze erstmal das Beispiel von tombe.
 
Es ist zwar schon eine Woche her, aber ich habe mir mal die Sache mit dem Kontextmenü zu Herzen genommen und ein wirkliches Kontextmenü gebastelt, also man kann auf eine Fläche mit der rechten Maustaste klicken und erhält ein Menü, aus dem man bestimmte Befehle auswählen kann. Bis auf einige kleine Schönheitsfehler, ist dieses Skript schon nutzbar (Schönheitsfehler: Aufrufen des Kontextmenüs am rechten und/oder unteren Rand erzeugt Rollleisten, man kann den Text der Menüpunkte auswählen und man kann während das Menü angezeigt wird noch die Rollleisten verwenden).

Details dazu findet man hier: http://www.tutorials.de/css/385412-kontext-menue-mit-box-schatten.html
jQuery kann man sich selber runter laden.

Nachtrag: Ich habe das Ganze jetzt mal für dein Problem umgesetzt und bei mir läuft es tadellos. Du kannst dir das hier mal ansehen.
HTML: 
<!DOCTYPE html>
<html>
<head>
  <title>context-menu</title>
  <script type="text/javascript" src="scripts/jquery.js"></script>
  <script type="text/javascript" src="scripts/application.js"></script>
  <link rel="stylesheet" type="text/css" href="styles/default.css" />
</head>
<body>
  <table id="table-selection" border="1" cellpadding="2" contextmenu="select-shift">
    <tr>
      <td>ND</td>
      <td>TD</td>
      <td></td>
      <td>ND</td>
      <td>ND</td>
    </tr>
    <tr>
      <td></td>
      <td>ND</td>
      <td>ND</td>
      <td>TD</td>
      <td>TD</td>
    </tr>
    <tr>
      <td>TD</td>
      <td>TD</td>
      <td></td>
      <td>TD</td>
      <td>ND</td>
    </tr>
  </table>
  <menu id="select-shift" type="context">
    <button data-shift="night" type="button">Nachtdienst</button>
    <button data-shift="day" type="button">Tagdienst</button>
    <button data-shift="none" type="button">kein Dienst</button>
  </menu>
</body>
</html>
application.js
Code: 
$(document).ready(function () {
  var has_context = null;
  
  // trigger the contextmenu event
  $(document).bind({
    // show context menu
    mousedown: function (event) {
      // if it is a right mouse click
      if(event.which === 3) {
        // hide all context menus
        $('menu[type=context]').css('display', 'none');
        // if the clicked element or any of its parents has a defined context menu
        if((typeof $(event.srcElement).attr('contextmenu') !== 'undefined') || (typeof $(event.srcElement).parents('[contextmenu]').attr('contextmenu') !== 'undefined')) {
          // trigger the contextmenu event
          $(document).trigger('contextmenu');
        }
      }
    },
    // hide context menu
    click: function () {
      $('menu[type=context]').fadeOut(100);
      has_context = null;
    },
    // context menu
    contextmenu: function (event) {
      // get event source element
      var element = has_context = $(event.srcElement);
      
      if(typeof element.attr('contextmenu') !== 'undefined') {
        element = $('#' + element.attr('contextmenu'));
      } else if(element.parents('[contextmenu]').attr('contextmenu') !== 'undefined') {
        element = $('#' + element.parents('[contextmenu]').attr('contextmenu'));
      } else {
        return false;
      }
      
      element
        // show the current context menu
        .css('display', 'block')
        // y-axis
        .css('top',  event.pageY - 4)
        // x-axis
        .css('left', event.pageX + 2);
      // disable default action
      return false;
    }
  });
  $('menu[type=context]').click(function (event) {
    switch($(event.srcElement).attr('data-shift')) {
      case 'night':
        has_context.text('Nachtdienst');
        break;
      case 'day':
        has_context.text('Tagdienst');
        break;
      case 'none':
        has_context.text('');
        break;
    }
    has_context = null;
  });
});
default.css
CSS: 
* {
  font-family: Helvetica, Arial, sans-serif;
  padding: 0;
  margin: 0;
}

body {
  width: 100%;
  height: 100%;
  background: green;
}

menu {
  border-radius: 3px;
  border: solid 1px #d5d5d5;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  margin: 0;
  padding: 4px 0 4px 0;
  background: white;
  display: none;
  position: absolute;
  z-index: 50000;
  -webkit-box-shadow: 0px 22px 100px 12px rgba(181, 181, 181, 0.2);
  -moz-box-shadow: 0px 22px 100px 12px rgba(181, 181, 181, 0.2);
  box-shadow: 0px 22px 100px 12px rgba(181, 181, 181, 0.2);
}

menu hr {
  margin: 5px 1px 5px 1px;
  border: 1px solid #E3E3E3;
  border-left: none;
  border-right: none;
  border-bottom: none;
}

menu button {
  height: 19px;
  width: 100%;
  margin: 0;
  padding: 0 21px 0 22px;
  float: none;
  display: block;
  outline: none;
  border: none;
  background: none;
  vertical-align: middle;
  text-align: left;
  color: #000000;
  font-size: 15px;
  word-spacing: 1px;
}

menu button:hover {
  color: #ffffff;
  background: blue;
}
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück