[JS] swapNode() : te langzaam?

[Verwijderd]

Ik probeer een tabel met invoervelden te 'toggle-en' tussen horizontale en verticale weergave, ik wil de tabel dus als het ware omklappen. Ik heb een pagina met een bepaalde tabel in horizontale weergave. Als ik mijn functie activeer, wordt er een nieuwe tabel gemaakt, alleen nu staan daarbij de cellen in telkens aparte rijen. Met behulp van de javascript methode swapNode wil ik dan de horizontale met de verticale cellen omruilen. Ik gebruik de onderstaande code:

code:

function toggle(number)
{
    var row = document.getElementById('row'+number);
    var cell = row.cells[0];
    var celltable = cell.children[0];
    var celtablerows = celltable.rows;
    var nr_fields = celtablerows.length;
    var newcells = new Array(nr_fields);
    var i;
    
    var rowindex = row.rowIndex;
    var table = row.parentElement;
    var cells = row.cells;
    
    var newrow = table.insertRow(rowindex);
    newrow.id = 'row'+number;
    
    var newcell;
    for (i=0;i<nr_fields;i++)
    {
        newcell = newrow.insertCell();
        newcell.swapNode(celtablerows[i].cells[1]); 
    }
    row.removeNode(true);
}

Deze code werkt eigenlijk pas goed als ik bijna helemaal onderaan

code:

newcell.swapNode(celtablerows[i].cells[1]);

vervang door

code:

alert(newcell.swapNode(celtablerows[i].cells[1]));

.

Als ik dus niet de alert eromheen zet, swapt hij de cel niet. Weet iemand wat hier aan de hand is en wat eventueel de oplossing is?

PS: Ik gebruik het plakken van oudecel.innerHTML niet overal, omdat ik een Editor heb gedownload die dan niet meer werkt.

[Verwijderd]

Hmm, swapNode dat is IE only. Kun je niet gewoon 2 keer appendChild doen?

[Verwijderd]

Ik zou het iets anders aanpakken. Dit is een opzetje:

JavaScript:

function SwapVH( oOriginal ) {
    var oNew = document.createElement('TABLE');

    var iRows = oOriginal.rows.length;
    var iCells = oOriginal.rows[0].cells.length;

    for(var i=0; i<iCells; i++) {
        var oRow = document.createElement('TR');
        oNew.appendChild(oRow);
        for(var j=0; j<iRows; j++) {
            var oOriCell = oOriginal.rows[j].cells[i];
            var oNewCell = oOriCell.cloneNode(true);
            oRow.appendChild(oNewCell);
        }
    }
    document.body.appendChild(oNew);
}

HTML:

<table onclick="SwapVH(this);">
    <tr>
        <td>1.1</td>
        <td><strong>1.2</strong></td>
        <td>1.3</td>
        <td>1.4</td>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
        <td>2.4</td>
    </tr>
    <tr>
        <td>3.1</td>
        <td>3.2</td>
        <td>3.3</td>
        <td>3.4</td>
    </tr>
</table>

Maar dit is verre van een triviaal probleem! Denk aan elementen als TH, CAPTION, TBODY, THEAD, TFOOT. Om nog maar te zwijgen over colspan en rowspan attributen. Niet elke tabel is zomaar te swappen op deze manier!

[Clay]

't is dat IE het niet doet maar je kan een table natuurlijk ook gewoon met CSS omdraaien,

code:

tr, thead, tbody, tfoot {
    display:table-cell;
}

td, th {
    display:block;
}

[Verwijderd]

Bedankt voor de reacties! Ik ga het inderdaad even proberen met appendChild dan maar. Ik hoef ook geen oplossing te hebben die voor elk mogelijke tabel werkt.

Maar ik blijf het raar vinden dat de swapNode() functie wel werkt als er een delay tussen zit (die ik nu simuleer door alert() om de swapNode() heen te zetten).

[André]

Verwijderd schreef op 29 september 2004 @ 10:55:

Maar ik blijf het raar vinden dat de swapNode() functie wel werkt als er een delay tussen zit (die ik nu simuleer door alert() om de swapNode() heen te zetten).

Dat komt omdat JS 'doorgaat' en niet wacht op de swapNode() totdat die klaar is. Dus het kan voorkomen dat alle swapNode()'s al aangeroepen zijn en dan pas uitgevoerd worden.

[Verwijderd]

André schreef op 29 september 2004 @ 11:00:
[...]

Dat komt omdat JS 'doorgaat' en niet wacht op de swapNode() totdat die klaar is. Dus het kan voorkomen dat alle swapNode()'s al aangeroepen zijn en dan pas uitgevoerd worden.

En daar is niks tegen te doen zeker?

[André]

Verwijderd schreef op 29 september 2004 @ 11:11:
[...]


En daar is niks tegen te doen zeker?

Nee, een timeout er omheen zetten kan een oplossing zijn maar mooi is anders:

code:

for (i=0;i<nr_fields;i++)
{
  newcell = newrow.insertCell();
  setTimeout("newcell.swapNode(celtablerows[" + i + "].cells[1])", i * 5);    
}