✔ Dynamisch generierte Tabelle und JQuery Problem!

[BrainLight]

Hallo liebe Community!

Ich hing jetzt schon seit einigen Stunden an einem Problem, was einfach ein wenig verrückt ist.

Hier ersteinmal der Code:

<script type="text/javascript">

 function check() {

	var twidth = screen.width;
	var theight = screen.height;
			
	var rows = Math.floor(theight/120);
	var cols = Math.floor(twidth/120);
    node = document.getElementById("tabelle1"); 
    node.parentNode.insertBefore(createTable(rows, cols), node ); 
}

function createTable(row, col, id) {

    var myTable = document.createElement("table"); 
        var tableBody = document.createElement("tbody");

        for(var j = 0; j < row; j++) { 
            var trow = document.createElement("tr"); 
            for(var i = 0; i < col; i++) { 
                    var tcell = document.createElement("td");
					var text = document.createTextNode("Zeile: "+j+", Spalte: "+i); 
					tcell.appendChild(text);
					tcell.setAttribute("class", "test");
					trow.appendChild(tcell); 
            }

            tableBody.appendChild(trow); 
    }

    myTable.appendChild(tableBody); 
    myTable.setAttribute("ID", id); 
    
	return myTable; 
}
</script> 

<script type="text/javascript">
		 $(document).ready(function(){
          
            $(".test").hover(function(){
              $(this).animate({ backgroundColor: "#f6f6f6"}, "fast")
            },
			function(){
			$(this).animate({ backgroundColor: "#72aac4"}, "slow")
			});
          });
</script>

Die generierte Tabelle kann nun leider nicht über JQuery animiert werden. Wenn ich aber eine Tabelle "hart" reincode per HTML, funktioniert das.

Kennt jemand dieses Problem?
Kann mir irgendwer helfen?

Tut mir leid wenn ich mich etwas schwammig ausdrücke... Für Fragen diesbezüglich bin ich zu haben

Danke im vorraus
BL

 

[Sven Mintel]

Moin,

das Problem an der Sache ist:
Die Eventüberwachung betrifft nur Elemente, die bereits existieren, wenn die Überwachung gestartet wird.

Die Lösung ist recht simpel
live()

 

[BrainLight]

Jau... das funktioniert. Das muss man mal wissen -Tztzzz

Danke!

 

[BrainLight]

So, für alle die es interessiert wie ich es gelöst habe:

<script type="text/javascript">
		 $(document).ready(function(){
          
            $(".test").live('mouseover', function(){
			$(this).animate({ backgroundColor: "#f6f6f6"}, "fast")
            return false;
			});
			
			$(".test").live('mouseout', function(){
			$(this).animate({ backgroundColor: "#cccccc"}, "slow")
            return false;
			});
			
          });
</script>

Mit der Hover-Funktion gng das leider nicht wie ich mir gedacht hätte.
Vielen Dank nochmals

 

[Chef_De_Loup]

Als Hinweis noch was zu Tabellen. Bitte bei Tabellen so vorgehen:

var table = document.createElement("table");
... // Tabelleneigenschaften
var row = table.insertRow(-1); // -1 = neues tr ans Ende der Liste in der Tabelle
... // tr-Elementeigenschaften
var cell = row.insertCell(-1);  // wie tr diesmal td, th gibt es meines Wissens nicht in dieser Form
... // td-Elementeigenschaften
usw.

Das Erstellen der Unterelemente einer tabelle mit document.createElement() klappt bei einigen Browsern nicht wie gewuenscht. Die Funktionen insertRow() und insertCell() erzeugen vollwertige Nodes, kann man also genauso verwenden wie bei createElement().