✔ deaktivieren eines Elements bei erneuten klicken

[Kalito]

Hallo,

ich habe eine Tabelle mit "n"-Spalten. Jede Spalte hat m Zeilen. Eine Zeile kann dabei in einer Spalte sein, aber auch über alle Spalten gehen. Am Beispiel: ich habe eine Tabelle mit 3 Spalten. Eine Zeile kann dabei über eine, über zwei, aber auch über 3 Spalten gehen. Jede Zeile hat dabei eine spezielle ID. Diese setzt sich aus einer eindeutigen ID, dem Startpunkt (also in welcher Spalte sich der Start befindet) und der Länge der Zeile. Zu jeder Spalte habe ich ein Inputfeld. Wenn ich nun auf eine Div klicke, dann wird in die ID in die Inputfelder eingetragen, welche dem Startpunkt und die von der Zeilenlänge betroffen sind. Am Beispiel: eindeutige ID = 5; Startpunkt: 2; Zeilenlänge= 2 --> Eintragung von 5 in die inputfelder der Spalten 2 und 3.

Momentan tun sich 2 Probleme bei mir auf.
1. Ein erneutes klicken auf dieses Element löscht nicht die Eingaben oder ändert die Klasse. Ich gehe davon aus, dass die problematik darin liegt, dass die entsprechende Klasse beim Seitenaufruf noch nicht existiert. Wie kann ich das aber lösen?

2. Wenn ich ein anderes Element klicke, dann werden zwar die entsprechenden Eingaben in den Eingabefeldern gelöscht, jedoch werden die Klassen der nicht mehr betreffenden Elemente nicht geändert.

Das ganze versuche ich mit Jquery zu lösen.

Hier noch der aktuelle Code

<style>
    .geklickt{
        border: #0a0 solid 5px;
    }
    
</style>

<script type="text/javascript">
$(document).ready( function(){
    var countslots = <?php echo count($dataarray['training']) ?> 

    $(".klickmich").click(function() {
        $(this).attr('class', 'geklickt');
        var myArray = this.id.split('-');
        
        //Ermittelt den alten Wert des zu ändernden Slots
        var oldTraining = $("#Training"+myArray[1]).val();
        
        //Prüfen aller Felder, ob sie den Wert besitzen und löschen des Inhaltes, wenn er den gesuchten Inhalt des geklcikten Elements besitzt
        for(var i = 1; i < Number(countslots)+Number(1);i++ ){
            if($("#Training"+i).val() == oldTraining) 
                $("#Training"+i).val("");
        }
        
        //Setzen der neuen Auswahl
        for (var i = myArray[1]; i < Number(myArray[1])+Number(myArray[2]); i++) {
            $("#Training"+i).val(myArray[0])
        }
    });
    
    $(".geklickt").click(function() {
        $(this).attr('class', 'klickmich');
    });

})
</script>

<table>
   <tr>
      <th>Slot 1</th>
      <th>Slot 2</th>
      <th>Slot 3</th>
   </tr>
   <tr>
       <td colspan = "1" id="1-1-1" class="klickmich">Test 1a</td>
       <td colspan = "1" id="2-2-1" class="klickmich">Test 1b</td>
       <td colspan = "1" id="3-3-1" class="klickmich">Test 1c</td>
   <tr/>
   <tr>
       <td colspan = "1" id="4-1-1" class="klickmich">Test 1a</td>
       <td colspan = "2" id="5-2-2" class="klickmich">Test 1b</td>
   <tr/>
   <tr>
       <td colspan = "3" id="6-1-3" class="klickmich">Test 1a</td>
   <tr/>
   <tr>
       <td><input id="Training1" /></td>
       <td><input id="Training2" /></td>
       <td><input id="Training3" /></td>
   </tr>
</table>

 

[Kalito]

Hallo.

Das 2. Problem habe ich gelöst.

Bei dem ersten Problem schaffe ich es momentan mit dem live-Element, dass ich bei erneutem Klick die Klasse geklickt wieder in klickmich umgewandelt wird. Wenn ich jedoch wieder auf das Element klicken möchte, kommt ein Fehler, dass die live-methode für dieses Objekt nicht existiert.
Bei

$(".klickmich").live("click", function() {
        $(this).attr('class', 'geklickt');
        var myArray = this.id.split('-');
        
        //Ermittelt den alten Wert des zu ändernden Slots
        var oldTraining = $("#Training"+myArray[1]).val();
        
        //Prüfen aller Felder, ob sie den Wert besitzen und löschen des Inhaltes, wenn er den gesuchten Inhalt des geklcikten Elements besitzt
        for(var i = 1; i < Number(countslots)+Number(1);i++ ){
            if($("#Training"+i).val() == oldTraining) 
                $("#Training"+i).val("");
        }
        
        //Entfernen der Markierung
        $("[id$="+oldTraining+"]").attr('class', 'klickmich');       
                
        //Setzen der neuen Auswahl
        for (var i = myArray[1]; i < Number(myArray[1])+Number(myArray[2]); i++) {
            $("#Training"+i).val(myArray[0])
        }
    });

kommt ebenfalls der Fehler und ich kann das Feld anklicken, wie ich lustig bin und nichts passiert

 

[Parantatatam]

Ich hoffe, dass ich deinen Algorithmus richtig verstanden habe, deshalb kannst du dir mal folgendes ansehen, was ich umgeschrieben habe. Denn das speichern von Werten in IDs oder in Klassennamen ist aus zweierlei Sicht problematisch: einerseits ist es ein schlechte Stil, andererseits dürfen IDs und Klassennamen nicht mit einer Ziffer beginnen: http://jsfiddle.net/MeiKatz/r5SAp/

 

[Kalito]

Hallo,

der Algorithmus stimmt bei dir so nicht ganz. Die erste Zahl ist nicht von der Position in der Tabelle abhängig, sondern kommt von der ID aus einer Datenbank. Die zweite und dritte Zahl habe ich aber so von dir übernommen.

Leider klappt das erneute Klicken auch bei deiner Ausführung nicht . Entweder kann ich das DIV garnicht anklicken oder ich kann es nach dem 2. Anklicken nicht erneut anklicken

 

[Kalito]

Ich habe es hinbekommen. Ich habe es so geschrieben, dass ich die Input-Felder überwache und bei dessen Änderung die Markierung entsprechend anpasse.