[JS] IE + appendChild("tr")

0

Witam, mam problem z poniższym kodem. Testowałem go pod FF i operą, gdzie wszystko wykonuje się tak jak powinno. Natomiast IE nie pokazuje niczego :| Po całym wieczorze, spędzonym przed kompem, nie doszedłem do niczego konstruktywnego. Czy ktoś wie, co nie pasuje IE ?

<!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=iso-8859-2" />
    <title>Untitled Page</title>
    <link rel="stylesheet" href="StyleSheet.css" />
    <script type="text/javascript">
        
        //********************************
    
        function cButton(capacity)
        {
            var content = capacity;
            var grafPath = null;
            
            var rootHandler = document.createElement("tr");
            var nodeHandler = document.createElement("td");
            
            
            
            this.getAttribute = function(name)
            {
                return nodeHandler.style[name];
            }
            
            this.setAttribute = function(name, value)
            {
                nodeHandler.style[name] = value;
                return nodeHandler.style[name];
            }
            
            this.getContent = function() {};
            this.setContent = function() {};
            
            this.getHandler = function()
            {
                with(nodeHandler.style)
                {
                    height = height||"auto";
                    width = width||"200px";
                }
                
                nodeHandler.innerHTML = content||"button";
                rootHandler.appendChild(nodeHandler);
                
                return rootHandler;
            }
            
        } // cButton()
        
        
        function loadScript()
        {
            m = document.createElement("table");
            document.body.appendChild(m);
            b = new cButton();
            m.appendChild( b.getHandler() );
            
            //alert( b.setAttribute("width", "100px") );
        }
        
        
        
    </script>
</head>

<body onload="loadScript()">
</body>
</html> ```
0

w IE, jak tworzysz tabele prze DOM, musisz wstawic takze elemnt tbody:

<table>
  <tbody>
    <tr>
      <td>Button</td>
    </tr>
  </tbody>
</table>
0

Dzięki stokrotne :-)

0

A wiesz może, co musze ustawić, żeby IE nie wstawiał, żednych wyrównań/ Bo gdy tworze tabelkę, przez DOM, to wiersz pierwszy jest oddzielony od drugiego.

Style jakie mam ustawione to:

""
height = "auto";
width = "200px";
padding = "0px";
margin = "0px"

""
padding = "0px";
margin = "0px"

""
padding = "0px";
margin = "0px"

"

0

hmmm... nie widzę żadnych wyrównań:

<script>
function addElm(elm, tag) {
  return elm.appendChild(document.createElement(tag));
}
function addText(elm, text) {
  return elm.appendChild(document.createTextNode(text));
}
function getElm(id) {
  return document.getElementById(id);
}
onload = function() {
  var container = getElm('container');
  var table = addElm(container, 'table');
  with (table) {
    cellSpacing ='0';
    cellPadding = '0';
    with (style) {
      padding = '0px';
      margin = '0px';
    }
  }
  var tbody = addElm(table, 'tbody');
  for (var i = 1; i <= 3; i++) {
    var tr = addElm(tbody, 'tr');
    var td = addElm(tr, 'td');
    with (td.style) {
      padding = '0px';
      margin = '0px'; 
      width = '200px';
      height = 'auto';
    }
    addText(td, 'Wiersz numer ' + i);   
  }
}
</script>
<div id="container"></div>

może pokaż swój kod ?

0 
<!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=iso-8859-2" />
        <title>Untitled Page</title>
        <link rel="stylesheet" href="StyleSheet.css" />
        <script type="text/javascript">
        
            //********************************
        
            function cButton(capacity)
            {
                var content = capacity;
                var grafPath = null;
                
                
                var rootHandler = document.createElement("tbody");
                var middleHandler = document.createElement("tr");
                var nodeHandler = document.createElement("td");
                
                
                
                this.getAttribute = function(name)
                {
                    return nodeHandler.style[name];
                }
                
                this.setAttribute = function(name, value)
                {
                    nodeHandler.style[name] = value;
                    return nodeHandler.style[name];
                }
                this.getGrafPath = function()
                {
                    return grafPath;
                }
                this.setGrafPath = function(newGrafPath)
                {
                    var temp = grafPath;
                    grafPath = newGrafPath;
                    return temp;
                }
                this.getContent = function()
                {
                    return nodeHandler.innerHTML;
                }
                this.setContent = function(newContent)
                {
                    capacity = newContent;
                    return (nodeHandler.innerHTML = newContent);
                }                
                this.getHandler = function()
                {
                    with(nodeHandler.style)
                    {
                        height = height||"auto";
                        width = width||"200px";
                        padding = "0px";
                        margin = "0px"
                    }
                    
                    rootHandler.style.margin = "0px";
                    rootHandler.style.padding = "0px";
                    
                    rootHandler.style.margin = "0px";
                    rootHandler.style.padding = "0px";
                    
                    nodeHandler.innerHTML = content||"button";
                    middleHandler.appendChild( nodeHandler );
                    rootHandler.appendChild( middleHandler );
                    
                    return rootHandler;
                }
                
            } // cButton()
            
            
            function exDiv(parentElement, width)
            {
                var rootElement = document.createElement("table");
                
                var grafUp = null;
                var grafMid = null;
                var grafDown = null;
                
                // "wskoaĄniki" odpowiedzialne, za oddzielanie przy kasowaniu za rozróżnianie headera i footera
                var delTopPtr = 0;
                var delBottomPtr = 0;
                
                parentElement ? document.getElementById(parentElement).appendChild(rootElement): document.body.appendChild(rootElement);
                rootElement.setAttribute("cellspacing", "0");
                rootElement.setAttribute("cellpadding", "0");
                rootElement.style.padding = "0px";
                rootElement.style.margin = "0px";
                rootElement.style.width = width;
                
                
                this.addButton = function(content, height)
                {
                    var button = new cButton(content);
                    
                    button.setAttribute("width", rootElement.style.width);
                    button.setAttribute("height", height||"150px");
                    
                    
                    if(grafMid)
                        button.setGrafPath(grafMid);
                    else
                    {
                        button.setAttribute("border", "solid 1px #000");
                        
                        // je?li nie jest pierwszy z kolei, to usuwamy górne obramowanie
                        if(rootElement.childNodes.length)
                            button.setAttribute("borderTop", "solid 0px #000");
                    }
                    
                    
                    return rootElement.appendChild( button.getHandler() );
                }
                
                this.remButton = function(buttonNo)
                {
                    if( !buttonNo )
                        buttonNo = 0;
                
                    if( (buttonNo >= 0) && (buttonNo < rootElement.childNodes.length) )
                        return rootElement.removeChild( rootElement.childNodes[buttonNo] );
                    
                    // tutaj ma być: sprawdzenie, czy usuwany, nie jest pierwszym z listy. Je?li tak, to ustawić ramkę
                    // następnego na solid 1px #000, chyba, że jest ustawiona grafa
                    
                    return null;
                }
                
            } // exDiv()
            
            
            
            function loadScript()
            {
                var rectangle = new exDiv(null, "100px");
                rectangle.addButton(null, "30px");
                rectangle.addButton(null, "30px");
            }
            
            
            
        </script>
    </head>
    
    <body onload="loadScript()">

    </body>
</html>
0

zamiast:

rootElement.setAttribute("cellspacing", "0");
rootElement.setAttribute("cellpadding", "0");

powinno być:

rootElement.cellSpacing = 0;
rootElement.cellPadding = 0;

albo:

rootElement.setAttribute("cellSpacing", "0");
rootElement.setAttribute("cellPadding", "0");
0

Faktycznie działa, ale to jest w jakiejś specyfikacji, czy tylko IE tego wymaga ? Masz może jakieś godne polecenia stronki z takimi mykami ?

Pozdrawiam.

1 użytkowników online, w tym zalogowanych: 0, gości: 1