Avatar billede m_k_l Nybegynder
07. august 2003 - 10:37 Der er 10 kommentarer og
1 løsning

ny linie i dynamisk tabel

hej,

Jeg har behov for at ændre en tabel dynamisk via et script, er det muligt at gøre noget lignende dette ???
Det skal både være muligt at slette, ændre og indsætte nye linier.

<tabel>
<div id="div1">
  <tr><td>teskt</td></tr>
</div>
<div id="div2">
  <tr><td>teskt</td></tr>
</div>
</tabel>

eks, metode til indsættelse af linie (pseudo)
newChild = document.createTextNode(string)
refChild = document.getElementById("div1")
document.insertBefore(newChild, refChild)
Avatar billede m_k_l Nybegynder
07. august 2003 - 13:21 #1
Hej, Jeg har forsøgt med denne html side, men jeg får bare en fejl......please help :-)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <script language="JavaScript">
            <!--
            function update()
            {
                var txtNode = document.createTextNode("Dette er ny Data");
                var td1Node = document.createElement("td");
                var td2Node = document.createElement("td");
                var tr1Node = document.createElement("tr");
                var divNode = document.createElement("div");

                td1Node.appendChild(txtNode);
                tr1Node.appendChild(td2Node);
                tr1Node.appendChild(td1Node);
                divNode.appendChild(tr1Node);

                var refChild = document.getElementById("ref");
                document.getElementById("myTable").insertBefore(divNode, refChild);
            }
            //-->
        </script>
    </head>
    <body>
        <INPUT onclick="update();return false;" id="Button1" type="button" value="Update table"><br>
        <br>
        <br>
        <br>
        <table border="2" id="myTable">
            <div id="myDiv">
                <tr>
                    <td width="200">data</td>
                    <td width="200">Skrammel</td>
                </tr>
            </div>
            <div id="ref">
                <tr>
                    <td width="200">data</td>
                    <td width="200">Mere skrammel</td>
                </tr>
            </div>
        </table>
    </body>
</html>
Avatar billede roenving Novice
07. august 2003 - 13:50 #2
Hvad laver de div'er ?-)

I bedste fald er de overflødige, for alt hvad en div i kan kan du også med en tr ...

Har du virkelig brug for dynamikken, ellers ville det måske være værd at overveje bare at skjule tr's som ikke blev brugt ?-)

-- og det passer med den fejl, jeg får ...

-- men jeg kigger lige lidt mere !-)
Avatar billede m_k_l Nybegynder
07. august 2003 - 13:53 #3
Er det da muligt at tilføje et ID til et "tr" element ??

Dynamikken er nødvendig, for jeg ved ikke hvilke data jeg modtager (Data hentes via et XML dokument, fra en database)
Avatar billede m_k_l Nybegynder
07. august 2003 - 13:57 #4
Fejlen jeg får er: "Error: Invalid argument" og knytter sig til linien "document.getElementById("myTable").insertBefore(divNode, refChild);"
Avatar billede m_k_l Nybegynder
07. august 2003 - 14:10 #5
Er det muligt at udskrive indholdet af "document" ???
f.eks. ved hjælp af alert(??) ??
Avatar billede m_k_l Nybegynder
07. august 2003 - 14:44 #6
Har fundet fejlen....
Det viste sig at der åbenbart var flere elementer mellem <table> og <tr>

Nedenstående løser dette problem

var trElement = document.getElementById("myDiv");
trElement.parentElement.insertBefore(tr1Node, refChild);

Det viser dog blot at jeg har endnu et problem med at indsætte alle mine celler.... :-/
Avatar billede roenving Novice
07. august 2003 - 15:02 #7
Og jeg fik prøvet med appendChild (bare for at teste !-) og det viste sig at den uproblematisk indsatte et tr-element, men den viste det ikke frem !o]

-- og _alle_ elementer kan have et id ...

-- en div _skal_ bare have det efter standarden -- den er ikke nået til de 'gamle' elementer ...
Avatar billede roenving Novice
07. august 2003 - 15:07 #8
Og lidt nemmere, du har jo allerede fat i et element:

                var refChild = document.getElementById("ref");
                refChild.parentElement.insertBefore(tr1Node, refChild);

og ja, en celle vises som standard ikke, hvis den ikke har noget indhold, men det kan du vel klare ved at appende en standard-textNode !-)

Og dette virker:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <script language="JavaScript">
            <!--
            function update()
            {
                var txtNode = document.createTextNode("Dette er ny Data");
                var td1Node = document.createElement("TD");
                var td2Node = document.createElement("TD");
                var tr1Node = document.createElement("TR");

                td1Node.appendChild(txtNode);
                tr1Node.appendChild(td2Node);
                tr1Node.appendChild(td1Node);

                var refChild = document.getElementById("ref");
                refChild.parentElement.insertBefore(tr1Node, refChild);
            }
            //-->
        </script>
    </head>
    <body>
        <INPUT onclick="update();return false;" id="Button1" type="button" value="Update table"><br>
        <br>
        <br>
        <br>
        <table border="2" id="myTable">
                <tr>
                    <td width="200">data</td>
                    <td width="200">Skrammel</td>
                </tr>
                <tr id="ref">
                    <td width="200">data</td>
                    <td width="200">Mere skrammel</td>
                </tr>
        </table>
    </body>
</html>
Avatar billede roenving Novice
07. august 2003 - 15:35 #9
Og det virkede så umiddelbart ikke i Mozilla, men jeg fandt så ud af, at vi kunne bruge parentNode i stedet, da det er understøttet af præcis de samme browsere som understøtter insertBefore:

                refChild.parentNode.insertBefore(tr1Node, refChild);

hth
jes '-)
Avatar billede m_k_l Nybegynder
08. august 2003 - 08:37 #10
det virker bare super !!! man må sige du kan nogle trix :-)
Takker !!
Avatar billede roenving Novice
08. august 2003 - 13:03 #11
Bueno, velbekomme og tak for points ;~}
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester