waschbaersiegen: <tr style="display: block;"> Funktioniert nicht ganz richtig

Beitrag lesen

Tach!
Das ganze ist ein Greasemonkey-Script was unterhalb einer Textarea eine Tabelle erzeugen soll.
In der ersten TR sind Smilies drin die man via "click" in das Textfeld einfügen kann.
In der 2. TR sind Sonderzeichen wie zB ✘ ✔ ♣ . Da es von diesen Zeichen doch einige mehr gibt, will ich die 2.TR erstmal verstecken und nur auf wunsch erscheinen lassen:

<tr id="tr_special" style="display: none;">

Die Tabelle wird aufgebaut und die 2.TR ist versteckt. Klicke ich dann auf (mehr) erscheint die 2.TR komplett unter der 1.Zelle der 1.TR???
Kommentiere ich das in dem Script aus mit dem "display: none;" und laß die 2.TR direkt anzeigen passt alles zusammen - bis ich dann einmal auf (mehr) klicke.
Wenn ich mir den Quellcode ansehe den das Script erzeugt ist alles ordentlich geöffnet/geschlossen - sollte passen.

Hab gestern erst etwas ganz ähnliches geschrieben wo TR´s versteckt waren und auf "click" dann erscheinen. Das ging Problemlos.... die Tabelle will einfach nicht.

Hier mal das Script:

var    url = document.URL;  
  
var smilie_url = new Array('http://static.werkenntwen.de/images/emoticons/grinsen.gif','http://static.werkenntwen.de/images/emoticons/zwinkern.gif','http://static.werkenntwen.de/images/emoticons/grinsen_zunge.gif','http://static.werkenntwen.de/images/emoticons/ueberrascht.gif','http://static.werkenntwen.de/images/emoticons/ungluecklich.gif','http://static.werkenntwen.de/images/emoticons/breites_grinsen.gif','http://static.werkenntwen.de/images/emoticons/cool.gif','http://static.werkenntwen.de/images/emoticons/kuss.gif','http://static.werkenntwen.de/images/emoticons/boese.gif','http://static.werkenntwen.de/images/emoticons/neidisch.gif');  
  
var smilie_code = new Array(':-)',';-)',':-P',':-O',':-(',':-D','8-)',':-*',':-@','(neidisch)');  
  
var so_zeichen = new Array('♠','♣','♥','♦','€','✓','✔','✕','✖','✗','✘');  
  
  
    function smile()  
    {  
        var allTextareas = document.getElementsByTagName('textarea');  
  
        if (allTextareas.length)  
        {  
            for (var x = 0; x < allTextareas.length; x++)  
            {  
                var thisTextarea = allTextareas[x];  
                var table = document.createElement('table');  
                table.setAttribute('border' , '1');  
  
                ///// GB-Eintrag & Blog /////  
                if ( thisTextarea.id == 'gb_body' || thisTextarea.id == 'body'){  
                    if (url.indexOf('/forum/showThread') > -1)  
                    {  
                        ///// Forums-Thread antworten /////  
                        table.setAttribute('style' , 'padding:0px 0px 0px 0px');  
                    }else{  
                        ///// GB-Eintrag & Blog /////  
                        table.setAttribute('style' , 'padding:0px 0px 0px 70px');  
                    }  
                }  
                ///// GB-Kommentar /////  
                if ( thisTextarea.name == 'comment' ){  
                    table.setAttribute('style' , 'padding:0px 0px 0px 30px');  
                }  
                ///// Event eintragen /////  
                if ( thisTextarea.name == 'description' || thisTextarea.name == 'routeDescription'){  
                    table.setAttribute('style' , 'padding:0px 0px 0px 210px');  
                }  
                ///// Gruppe bearbeiten /////  
                if ( thisTextarea.id == 'edit_ClubDescription' || thisTextarea.id == 'edit_ClubNews' || thisTextarea.id == 'edit_ClubSnippet' ){  
                    table.setAttribute('style' , 'padding:0px 0px 0px 260px');  
                }  
  
                ///// tr1 mit WKW-Smilies /////  
                tr1 = table.appendChild(document.createElement('tr'));  
  
                ///// tr mit WKW-Smilies aus Array erzeigen /////  
                for ( i=0; i < smilie_url.length; i++)  
                {  
                    td = tr1.appendChild(document.createElement('td'));  
                    img = td.appendChild(document.createElement('img'));  
                    img.src = smilie_url[i]; // URL-Smilie  
                    img.id = smilie_code[i]; // echte schreibweise  
                    img.title = smilie_code[i];  
                    img.alt = smilie_code[i];  
                    img.name = x; // Nummer der aufrufenden Textarea  
                    img.addEventListener('click' , insert , false );  
                }  
                ///// (mehr)-Link einfügen /////  
                td = tr1.appendChild(document.createElement('td'));  
                var a = td.appendChild(document.createElement('a'));  
                a.appendChild(document.createTextNode(' (mehr)'));  
  
///////////////////// Der Listener soll die TR erzeugen/entfernen /////  
                a.addEventListener('click', changeTr ,true);  
  
                ///// tr2 mit Sonderzeichen /////  
                tr2 = table.appendChild(document.createElement('tr'));  
  
////////////////////// Kommentiere ich die nächste Zeile aus passt das Layout /////  
                tr2.setAttribute('style' , 'display:none');  
  
                tr2.id = 'tr_special';  
                ///// tr mit Sonderzeichen aus Array erzeugen /////  
                for ( i=0; i < so_zeichen.length; i++)  
                {  
                    td = tr2.appendChild(document.createElement('td'));  
                    a = td.appendChild(document.createElement('a'));  
                    a.appendChild(document.createTextNode(so_zeichen[i]));  
                    a.id = so_zeichen[i];  
                    a.name = x; // Nummer der aufrufenden Textarea  
                    a.addEventListener('click' , insert , false );  
                }  
                thisTextarea.parentNode.insertBefore(table, thisTextarea.nextSibling);  
            }  
        }  
    }  
  
///////// TR Style setzen /////  
    function changeTr(e)  
    {  
        tr_style = document.getElementById('tr_special')  
        if ( tr_style.style.display == 'none' ) {  
  
            document.getElementById('tr_special').style.display = "block";  
        }else {  
  
            document.getElementById('tr_special').style.display = "none";  
        }  
    }  
  
    function insert(e)  
    {  
        var e=e? e : window.event;  
        var el=e.target? e.target : e.srcElement;  
  
        ///// http://aktuell.de.selfhtml.org/artikel/javascript/bbcode/beispiel.htm /////  
        var allTextareas = document.getElementsByTagName('textarea');  
        ///// Welche Textarea hat den Focus? /////  
         var input = allTextareas[el.name];  
          input.focus();  
  
        if(typeof input.selectionStart != 'undefined')  
        {  
            ///// Smilie an Pos. 'X' einfügen /////  
            var start = input.selectionStart;  
            var end = input.selectionEnd;  
            var insText = input.value.substring(start, end);  
            input.value = input.value.substr(0, start) + ' ' + el.id + ' ' + insText +  input.value.substr(end);  
            ///// Anpassen der Cursorposition /////  
            var pos;  
            if (insText.length == 0) {  
              pos = start + el.id.length+2;  
            } else {  
              pos = start + el.id.length+2 + insText.length+2 + el.id.length+2;  
            }  
            input.selectionStart = pos;  
            input.selectionEnd = pos;  
        }  
    }  

Bin ein wenig ratlos. Vor allem weil es gestern mit einer anderen Tabelle problemlos klappte.

LG
Markus