Visualizzazione dei risultati da 1 a 8 su 8
  1. #1

    DOM problemi con IE per creare TABLE

    Ciao.
    Il seguente codice funziona in FF e Opera
    ma non con IE non riesco proprio a capire
    perchè PP


    Codice PHP:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd"
    >
    <
    html>
    <
    head>
    <
    title>Untitled Document</title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <
    script language="JavaScript" type="text/JavaScript">
    function 
    buildTable()
    {
        var 
    content document.getElementById('content');
        var 
    mTable document.createElement('mTable');
        
    mTable.setAttribute('cellspacing','0');
        
    mTable.setAttribute('cellpadding','0');
        var 
    tr document.createElement('tr');
        var 
    td document.createElement('td');
        
    td.appendChild(document.createTextNode('pippo'));
        
    mTable.appendChild(tr);
        
    mTable.appendChild(td);
        
    alert(mTable);
        
    content.appendChild(mTable);
    }
    window.onload = function()
    {
    buildTable();
    }

    </script>

    </head>
    <body>
    <div id="content"></div>
    </body>
    </html> 

    Without faith, nothing is possible. With it, nothing is impossible
    http://ilwebdifabio.it

  2. #2
    Utente di HTML.it L'avatar di Xinod
    Registrato dal
    Sep 2000
    Messaggi
    13,649
    document.createElement('mTable');
    mTable

    cmq se non sbaglio fai 2 errori:
    - il td va appeso al tr, non al table
    - i tr vanno appesi ad un tbody, che va creato e a sua volta appeso a table

    ciao

  3. #3

    ...............

    document.createElement('mTable');
    Ops find and replace error

    il td va appeso al tr, non al table
    Ok fixed :

    Codice PHP:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd"
    >
    <
    html>
    <
    head>
    <
    title>Untitled Document</title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <
    script language="JavaScript" type="text/JavaScript">
    function 
    buildTable()
    {
        var 
    content document.getElementById('content');
        var 
    mTable document.createElement('table');
        
    mTable.setAttribute('cellspacing','0');
        
    mTable.setAttribute('cellpadding','0');
        var 
    tr document.createElement('tr');
        var 
    td document.createElement('td');
        
    td.appendChild(document.createTextNode('pippo'));
        
    tr.appendChild(td);
        
    mTable.appendChild(tr);
        
    alert(mTable);
        
    content.appendChild(mTable);
    }
    window.onload = function()
    {
    buildTable();
    }

    </script>

    </head>
    <body>
    <div id="content"></div>
    </body>
    </html> 
    i tr vanno appesi ad un tbody, che va creato e a sua volta appeso a table
    D'accordo ma il codice dovrebbe funzionare ugualmente
    come funziona con FF e Opera.


    Grazie per la risposta.
    PP non riesco proprio a capire cosa c'è
    che non va.
    Nello script a cui sto lavorando
    appendo ogni sorta di tag form, span, p, ul, li
    e via dicendo senza problemi vado a provare
    lo script su IE la parte della tabella non funziona




    Without faith, nothing is possible. With it, nothing is impossible
    http://ilwebdifabio.it

  4. #4
    Utente di HTML.it L'avatar di Xinod
    Registrato dal
    Sep 2000
    Messaggi
    13,649
    fidati
    l' ultimo codice che hai postato anche a me non funziona con IE
    se creo un tbody, appendo a questo il tr e poi l' appendo a table funziona (IE6)

    quando si lavora col DOM il tbody e' sempre meglio inserirlo e considerarlo nell' alberatura,
    per esempio risalendo da un td tramite parentNode per alcuni browser il tbody c'e' anche dove non e' segnato nel markup, per cui tanto vale scriverlo e considerarlo

  5. #5

    ........



    Funziona !!!!!!!!

    Non capiterà ma ti devo una bevuta
    un sentito grazie non sapevo proprio che pesci prendere.
    Posto il codice ad uso del forum:

    Codice PHP:
    function buildTable()
    {
        var 
    content document.getElementById('content');
        var 
    mTable document.createElement('table');
        
    mTable.setAttribute('cellspacing','0');
        
    mTable.setAttribute('cellpadding','0');
        var 
    mTBody document.createElement('tbody');
        var 
    tr document.createElement('tr');
        var 
    td document.createElement('td');
        
    td.appendChild(document.createTextNode('pippo'));
        
    tr.appendChild(td);
        
    mTBody.appendChild(tr);
        
    mTable.appendChild(mTBody);
        
    content.appendChild(mTable);




    Without faith, nothing is possible. With it, nothing is impossible
    http://ilwebdifabio.it

  6. #6

    ...........

    Ciao.
    Ci sarebbe un altro piccolo problemuccio
    Nello script reale adesso la tabella viene visualizzata
    ma con uno spazio al top (solo IE) (è come se avesse la table un margine-top)
    Inoltre con IE non evidenzia gli stili (delle tr come class)
    Visto che c'ero ho aggiunto tutte le componenti della table
    posto il codice nella speranza che tu possa darci un occhio.

    Codice PHP:
    function displayUserList(xml)
    {
        var 
    classA 'former';
        var 
    classB 'latter';
        var 
    user xml.getElementsByTagName('user');
        var 
    nUsers user.length;
        var 
    content document.getElementById('content');
        if(!
    content){return;}
        if(
    nUsers>0)
        {
            var 
    table document.createElement('table');
            
    table.setAttribute('cellspacing','0');
            
    table.setAttribute('cellpadding','0');
            var 
    mTBody document.createElement('tbody');
            var 
    mThead document.createElement('thead');
            var 
    mTfoot document.createElement('tfoot');
            var 
    trH document.createElement('tr');
            var 
    nTh document.createElement('th');
            
    nTh.setAttribute('width','4%');
            
    nTh.appendChild(document.createTextNode('N°'));
            var 
    uTh document.createElement('th');
            
    uTh.setAttribute('width','17%');
            
    uTh.appendChild(document.createTextNode('Username'));
            var 
    eTh document.createElement('th');
            
    eTh.setAttribute('width','36%');
            
    eTh.appendChild(document.createTextNode('Email'));
            var 
    jTh document.createElement('th');
            
    jTh.setAttribute('width','20%');
            
    jTh.appendChild(document.createTextNode('Join Date'));
            var 
    lTh document.createElement('th');
            
    lTh.setAttribute('width','20%');
            
    lTh.appendChild(document.createTextNode('Last Login'));
            var 
    dTh document.createElement('th');
            
    dTh.setAttribute('width','3%');
            
    dTh.appendChild(document.createTextNode('Delete'));
            var 
    header = [nTh,uTh,eTh,jTh,lTh,dTh];
            for(var 
    i=0;i<header.length;i++)
            {
                
    trH.appendChild(header[i]);
            }
            
    mThead.appendChild(trH);
            
    table.appendChild(mThead);
            var 
    fTr document.createElement('tr');
            for(var 
    i=0;i<header.length;i++)
            {    
                var 
    fTd=document.createElement('td');
                
    fTr.appendChild(fTd);
            }
            
    mTfoot.appendChild(fTr);
            
    table.appendChild(mTfoot);
            var 
    0;
            for(var 
    i=0;i<nUsers;i++)
            {
                
    n++;
                var 
    name user[i].getElementsByTagName('user_name')[0].firstChild.data;
                var 
    email user[i].getElementsByTagName('user_email')[0].firstChild.data;
                var 
    regDate user[i].getElementsByTagName('user_date')[0].firstChild.data;
                var 
    lastLogin user[i].getElementsByTagName('user_stat_date')[0].firstChild.data;
                var 
    id user[i].getElementsByTagName('user_id')[0].firstChild.data;
                var 
    inputD document.createElement('input');
                
    inputD.setAttribute('type','button');
                
    inputD.setAttribute('name',id);
                
    inputD.setAttribute('value','Delete');
                
    inputD.setAttribute('class','delete');
                var 
    values = [n,name,email,regDate,lastLogin,inputD];
                var 
    tr document.createElement('tr');
                var 
    current=(i%2)?classA:classB;
                
    tr.setAttribute('class',current);
                
    table.appendChild(tr);
                for(var 
    j=0;j<values.length;j++)
                {
                    var 
    td=document.createElement('td');
                    if(
    typeof values[j] ==  'object')
                    {
                        
    td.appendChild(inputD);
                        
    tr.appendChild(td);
                    }
                    else
                    {
                        
    td.appendChild(document.createTextNode(values[j]));
                        
    tr.appendChild(td);
                    }
                }
                
    mTBody.appendChild(tr);
            }
            
    removeFChild(content);
            
    table.appendChild(mTBody);
            
    content.appendChild(table);
        }
        else
        {
            var 
    document.createElement('p');
            
    p.setAttribute('class','valid');
            
    p.appendChild(document.createTextNode(noData));
            
    removeFChild(content);
            
    content.appendChild(p);
        }
    }; 


    Without faith, nothing is possible. With it, nothing is impossible
    http://ilwebdifabio.it

  7. #7

    ............

    Ciao.
    Scusa per il pezzettone di codice
    (che tra l'altro va bene !) il problema non era
    in js ma nel css :

    codice di esempio (+ corto )

    Codice PHP:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd"
    >
    <
    html>
    <
    head>
    <
    title>Untitled Document</title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <
    style type="text/css">
    * {
        
    margin:0px;
        
    padding:0px
    }
    a:linka:visited,a:hover,a:active {
        
    text-decoration none;
        
    color:#62AC24; 
        
    font-weight:700;
    }
    body 
        
    text-align:center;
        
    background-color:#EDF6D9;
        
    color:#28780A
    }
    div#container {
        
    margin0 auto;
        
    width:940px;
        
    border:1px solid #77B608;  
        
    text-align:left
    }
    div#header {
        
    margin-bottom:20px
        
    border-bottom:1px solid #77B608;  
    }
    div#header h1 { 
        
    line-height:70px
        
    text-align:center
    }

    div#navigation {
        
    floatleft;
        
    width150px

    div#content { 
        
    heightauto !important;  
        
    height200px;      
        
    min-height200px
        
    margin-left150px
    }
    div#footer { 
        
    clearleft;
        
    border-top:1px solid #77B608;
        
    line-height:30px;  
    }
    div#footer h3 {
         
    text-align:center
    }

    /* MAIN MENU */
    h4#panel {
        
    margin-left:5px;
    }
    div#navigation ul { 
        
    width155px;
        
    margin-left:5px;
        list-
    style-typenone
    }
    div#navigation ul li a { 
        
    displayblock;
        
    width150px;
        
    text-decoration:none;
        
    background-color:#EDF6D9;
        
    color:#62AC24;
        
    font-weight:700;
    }
    div#navigation ul li a.active { 
        
    displayblock;
        
    width150px;
        
    text-decoration:none;
        
    background-color:#EDF6D9;
        
    color:#AC6A24;
        
    font-weight:700;
    }
    /* DOM */
    ul#userDetails {
        
    list-style-typenone
    }
    span.errors 
        
    font-size:12px
        
    color:#FF0000 
    }
    form {
        
    width:400px
    }
    form label {
        
    color:#28780A;
    }
    form input {
        
    width:160px;
        
    padding-left:5px;
        
    border:1px solid #fff
    }
    form input#bottom {
        
    width:160px
        
    margin-top:5px;
        
    border:1px solid #fff;
        /*background-color:#77B608;*/
        
    color:#FFFFFF; 
    }
    /*table { 
        table-layout: fixed;
        width:770px; 
        margin:0px 10px; 
    }*/
    tr.former 
        
    background-color:#FFE0CA
    }
    tr.latter 
        
    background-color:#DFF3C0
    }
    </
    style>
    <
    script language="JavaScript" type="text/JavaScript">
    function 
    getTable(cs,cp)
    {
        var 
    table document.createElement('table');
        
    table.setAttribute('cellspacing',cs);
        
    table.setAttribute('cellpadding',cp);
        return 
    table;
    }
    function 
    getHeadTable(h,w)
    {
        if(
    h.length!=w.length){return;}
        var 
    tHead document.createElement('thead');
        var 
    hTr document.createElement('tr');
        for (var 
    0h.lengthi++) 
        {
            var 
    th document.createElement('th');
            
    th.setAttribute('width',w[i]);
            
    th.appendChild(document.createTextNode(h[i]));
            
    hTr.appendChild(th);
        }
        
    tHead.appendChild(hTr);
        return 
    tHead;
    }
    function 
    getFootTable(v)
    {
        var 
    tFoot document.createElement('tfoot');
        var 
    fTr document.createElement('tr');
        for (var 
    0v.lengthi++) 
        {
            var 
    td document.createElement('td');
            
    td.appendChild(document.createTextNode(v[i]));
            
    fTr.appendChild(td);
        }
        
    tFoot.appendChild(fTr);
        return 
    tFoot;
    }
    function 
    getBodyTable()
    {
        var 
    tBody document.createElement('tbody');
        return 
    tBody;
    }
    function 
    test()
    {
            var 
    content document.getElementById('content');
            if(!
    content){return;}
            
    = ['N°','Username','Email','Join Date','Last Login','Delete'];
            
    = ['3%','17%','36%','20%','20%','4%'];
            var 
    table getTable('0','0');
            var 
    tHead getHeadTable(h,w);
            var 
    tBody getBodyTable();
            
    table.appendChild(tHead);
            
    table.appendChild(tBody);
            
    content.appendChild(table);
    alert(content.firstChild.tagName);
    alert(table.parentNode.tagName);
    }
    window.onload = function()
    {
    test();
    }

    </script>

    </head>
    <div id="container">
        <div id="header">
            <h1>User Manager</h1>
        </div>
        <div id="navigation">
        <h4 id="panel">Control Panel</h4>
        <ul>
            [*][url="index.php"]Home[/url]
            [*][url="index.php"]Edit Password[/url]
            [*][url="index.php"]View Profile[/url]
            [*][url="index.php"]Users List[/url]
        [/list]
        </div>
        <div id="content"></div>
        <div id="footer"><h3>By Whisher</h3></div>
    </div>
    </html> 
    Il problema è qui
    /*table {
    table-layout: fixed;
    width:770px;
    margin:0px 10px;
    }*/
    Se togli il commento avrai l'errore.

    Ok posso definire width direttamente
    nella tabella ma mi piacerebbe capire
    cosa c'è che non va !




    Without faith, nothing is possible. With it, nothing is impossible
    http://ilwebdifabio.it

  8. #8

    ..........

    Dunque il problema era nella percentuale
    quindi ho settato la width in px
    ma IE titta alla fine ho messo
    div#content>table {
    table-layout: fixed;
    width:770px;
    margin:0px 10px;
    }
    Nascondo la regola a IE.


    Soluzioni meno drastiche ?



    Without faith, nothing is possible. With it, nothing is impossible
    http://ilwebdifabio.it

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.