[js/xhtml] Gegenereerde tabel links uitgelijnd

[cyberstalker]

Ik heb een probleem bij het dynamisch genereren van een tabel.

Ik heb een tabel waarbij met <th> elementen de gewenste breedte van de table-cells wordt opgegeven. Een voorbeeldje:

HTML:

<table>
    <thead>
        <tr class="odd">
            <th style="width: 19%;">Voornaam</th>
            <th style="width: 19%;">Voorvoegsel</th>
            <th style="width: 19%;">Achternaam</th>
            <th style="width: 15%;">Geboortedatum</th>
            <th style="width: 28%;">Acties</th>
        </tr>
    </thead>
    <tbody>
        <tr class="even">
            <td><a href="/person/view/2">Jaap</a></td>
            <td><a href="/person/view/2"></a></td>
            <td><a href="/person/view/2">Smelik</a></td>
            <td><a href="/person/view/2">07/05/1981</a></td>
            <td>
                <a href="/personProfile?pid=2">Dossier</a>
                <a href="/expenseInsert?tsucode=jsmlk07051981">Onkosten</a>
                <a href="/deductionInsert?tsucode=jsmlk07051981">Vorderingen</a>
                <a href="/scoreOutage?action=view&amp;tsucode=jsmlk07051981">Uitval</a>
            </td>
        </tr>
        <tr class="odd">
            <td><a href="/person/view/16">Melle</a></td>
            <td><a href="/person/view/16"></a></td>
            <td><a href="/person/view/16">Smelik</a></td>
            <td><a href="/person/view/16">24/10/1985</a></td>
            <td>
                <a href="/personProfile?pid=16">Dossier</a>
                <a href="/expenseInsert?tsucode=msmlk24101985">Onkosten</a>
                <a href="/deductionInsert?tsucode=msmlk24101985">Vorderingen</a>
                <a href="/scoreOutage?action=view&amp;tsucode=msmlk24101985">Uitval</a>
            </td>
        </tr>
    </tbody>
</table>

Nu heb ik een ajax-scriptje waarmee ik deze zoekresultaten opvraag. Deze haalt dan de bestaande elementen uit de tabel en plaatst daar de nieuwe resultaten in.

JavaScript:

function search_view(XMLRequest)
{
    var xml_doc;
    var info, status, message;
    var tsucode, personid, name_first, name_suffix, name_last, birthday;
    var table, rows;
    var tr, td, a, text;
    var i;

    if (XMLRequest.readyState != 4)
    {
        return false;
    }

    // request has been completed. process it
    xml_doc        = XMLRequest.responseXML.getElementsByTagName('result').item(0);

    info           = xml_doc.getElementsByTagName('info').item(0);
    status         = info.getElementsByTagName('status').item(0).firstChild.data;
    message        = info.getElementsByTagName('message').item(0).firstChild.data;

    if (status != 'success')
    {
        alert(message);
        return false;
    }

    table          = document.getElementsByTagName('table').item(0);
    rows           = table.getElementsByTagName('tr');
    
    while (rows.length > 1)
    {
        table.removeChild(rows[1])
    }
    
    var tr_class   = 'odd';

    var data       = xml_doc.getElementsByTagName('data').item(0);
    var entries    = data.getElementsByTagName('entry');

    for (i = 0; i < entries.length; i++)
    {
        tr_class    = tr_class == 'odd'    ?    'even'        :    'odd';
        
        tsucode     = get_field(entries[i], 'tsucode');
        personid    = get_field(entries[i], 'personid');
        name_first  = get_field(entries[i], 'name_first');
        name_suffix = get_field(entries[i], 'name_suffix');
        name_last   = get_field(entries[i], 'name_last');
        birthday    = get_field(entries[i], 'birthday');
        
        tr          = document.createElement('tr');
        tr.setAttribute('class', tr_class);

        td          = document.createElement('td');
        a           = document.createElement('a');
        text        = document.createTextNode(name_first);
        a.setAttribute('href', basedir+'person/view/'+personid);
        a.appendChild(text);
        td.appendChild(a);
        tr.appendChild(td);
        
        td          = document.createElement('td');
        a           = document.createElement('a');
        text        = document.createTextNode(name_suffix);
        a.setAttribute('href', basedir+'person/view/'+personid);
        a.appendChild(text);
        td.appendChild(a);
        tr.appendChild(td);

        td          = document.createElement('td');
        a           = document.createElement('a');
        text        = document.createTextNode(name_last);
        a.setAttribute('href', basedir+'person/view/'+personid);
        a.appendChild(text);
        td.appendChild(a);
        tr.appendChild(td);

        td          = document.createElement('td');
        a           = document.createElement('a');
        text        = document.createTextNode(date_format(birthday));
        a.setAttribute('href', basedir+'person/view/'+personid);
        a.appendChild(text);
        td.appendChild(a);
        tr.appendChild(td);

        td          = document.createElement('td');
        a           = document.createElement('a');
        text        = document.createTextNode('Dossier');
        a.setAttribute('href', basedir+'personProfile?pid='+personid);
        a.appendChild(text);
        td.appendChild(a);

        a           = document.createElement('a');
        text        = document.createTextNode('Onkosten');
        a.setAttribute('href', basedir+'expenseInsert?tsucode='+tsucode);
        a.appendChild(text);
        td.appendChild(a);

        a           = document.createElement('a');
        text        = document.createTextNode('Vorderingen');
        a.setAttribute('href', basedir+'deductionInsert?tsucode='+tsucode);
        a.appendChild(text);
        td.appendChild(a);

        a           = document.createElement('a');
        text        = document.createTextNode('Uitval');
        a.setAttribute('href', basedir+'scoreOutage?action=view&tsucode='+tsucode);
        a.appendChild(text);
        td.appendChild(a);

        tr.appendChild(td);
        
        table.appendChild(tr);
    }
}

Zoals je ziet creeert dit script de complete inhoud van de tabel (met uitzondering van de th elementen, die blijven staan). Het probleem hierbij is dat de gegenereerde content helemaal links komt te staan, net alsof alles in 1 <td> zit.

Ik heb al gekeken welke content er precies wordt gegenereerd (selecteren en rechtsklikken 'view selection source' in Fx). De content is precies gelijk aan de content van het php script, dus daar zou de fout niet moeten kunnen zitten.

Wat kan ik doen om dit probleem op te lossen?

[crisp]

JavaScript:

table.appendChild(tr);

je vergeet de impliciete tbody

[frickY]

^^ net te laat.
Browser wil inderdaad altijd een tbody hebben tussen de table en tr's.

[cyberstalker]

crisp schreef op woensdag 08 november 2006 @ 12:17:

JavaScript:

table.appendChild(tr);

je vergeet de impliciete tbody

Ik dacht dat dat alleen voor html gold. In xhtml heb je toch geen 'implied elements'? Ik ga het i.i.g. even proberen.

[crisp]

cyberstalker schreef op woensdag 08 november 2006 @ 12:57:
[...]

Ik dacht dat dat alleen voor html gold. In xhtml heb je toch geen 'implied elements'? Ik ga het i.i.g. even proberen.

In echt XHTML (dus met XHTML mimetype) niet nee, het is dan een volledig optional element en zal indien weggelaten ook niet in de DOM-tree voorkomen.
Maar remember: XHTML verstuurd als text/html is HTML en geen XHTML

[ Voor 15% gewijzigd door crisp op 08-11-2006 13:15 ]

[cyberstalker]

Ik werk met echte xhtml. Het doet overigens wel iets, zo'n tbody element. De tabel wordt wel iets breder, maar nog niet breed genoeg. Ik probeer het nog even met <thead> voor de header erbij .

[ Voor 18% gewijzigd door cyberstalker op 08-11-2006 13:39 ]

[crisp]

Kijk anders eens naar table-layout: fixed

[cyberstalker]

crisp schreef op woensdag 08 november 2006 @ 13:42:
Kijk anders eens naar table-layout: fixed

Het toevoegen van een <thead> en <tbody> heeft het probleem opgelost . Ik heb geen flauw idee waarom, maar het werkt nu .

[cyberstalker]

Oeps! Toch nog niet helemaal opgelost.

De gegenereerde tabel houdt zich nu wel aan de breedte van de tabel bij het laden van de pagina. Dit waarschijnlijk omdat de <tbody> zijn breedte behoudt. Als de pagina echter zonder resultaten wordt geladen (wat nu dus de standaard gaat worden, omdat alle resultaten met ajax worden geladen) is de tabel niet breed genoeg. De tabel wordt dan niet breder bij het plaatsen van resultaten.

Hoe kan ik de tabel gewoon vertellen altijd een specifieke breedte te gebruiken, ongeacht wat er voor content instaat. Ik heb zoals je ziet al geprobeerd de breedte van de <th> elementen proberen in te stellen.

[crisp]

crisp schreef op woensdag 08 november 2006 @ 13:42:
Kijk anders eens naar table-layout: fixed

[cyberstalker]

table-layout: fixed; heb ik nu in elke combinatie die ik kon bedenken geprobeerd. Zelfs als ik dit op de selector 'table, table tr, table tr th, table thead, table tbody' zet werkt het niet.

Dit lost het probleem geenszins op. De tabel blijft hardnekkig zijn 'automatische' breedte behouden en weigert een met css opgegeven breedte aan te nemen.

[ Voor 29% gewijzigd door cyberstalker op 10-11-2006 23:07 ]