Notifikationer

Markér alle som læst Log ud

andreas13_fam Nybegynder

10. april 2009 - 20:29 Der er 13 kommentarer og
1 løsning

tilføj et element med .this og DOM

Hvis jeg nu har en HTML kode som denne:

<table id="dom">
<tr>
<td><a href="java script:tilføj()">TEST</a><td><td>tekst<td>
</tr>

<tr>
<td><a href="java script:tilføj()">TEST</a><td><td>tekst<td>
</tr>
<tr>
<td><a href="java script:tilføj()">TEST</a><td><td>tekst<td>
</tr>
<table>

Hvordan kan jeg så tilføje en <tr> der hvor  er ved hjælp af DOM.

Jeg havde forstillet mig at man kunne bruge
insertBefore(element,før);
Men hvad skal der stå ved før, sådan at den altid kan finde ud af at placere et nyt element ligefør den <tr> som <a> er inde i.
Mit mål er at _undgå_ at bruge id.

Synes godt om

majbom Novice

10. april 2009 - 21:22 #1

hvordan skal scriptet vide at det er netop dér den skal indsætte en ny <tr>, og ikke efter den næste? er det fast? er det altid efter den 1.? og hvorfor vil du ikke bruge id?

Synes godt om

andreas13_fam Nybegynder

11. april 2009 - 11:29 #2

jeg havde forstillet mig at man kunne gå 2 niver op i DOM træet og så her finde childNodes[denne <tr> fundet med this]
den værdi kunne man så bruge på insertBefore(element,childNodes[denne <tr> fundet med this]);

Grunden til at jeg ikke vil bruge id er at det hurtigt kan blive kompliceret hvis man nu trykker på lidt forskellige knapper, hist og her mange gange.

Jeg har set lidt på: http://www.howtocreate.co.uk/tutorials/javascript/dombasics og tænker lidt om this.parentNode kunne bruges, men jeg er lidt i tvivl om hvad den gør.
(Du kan søge efter:"In case you were wondering how I managed to make those new paragraphs" - teksten i sig selv er hvis ligegyldig)

PS: der hvor den skal placeres er altid lige før den <tr> som linket (<a>) er i.

Synes godt om

olebole Juniormester

11. april 2009 - 17:09 #3

<ole>

<script type="text/javascript">
function foo(oLnk) {
var oTr = oLnk.parentNode.parentNode;
var oTbdy = oTr.parentNode;
var oNewTr = oTr.cloneNode(true);
oTbdy.insertBefore(oNewTr, oTr);
}
</script>

<table id="dom">
<tr>
<td><a href="java script:foo(this)">TEST</a><td><td>tekst<td>
</tr>

<tr>
<td><a href="java script:foo(this)">TEST</a><td><td>tekst<td>
</tr>
<tr>
<td><a href="java script:foo(this)">TEST</a><td><td>tekst<td>
</tr>
<table>

/mvh
</bole>

Synes godt om

andreas13_fam Nybegynder

11. april 2009 - 18:42 #4

ud over mellemrummet i java script:
så virker det desvære ikke.

FF:
Fejl: oLnk.parentNode is undefined
Kildefil: file:///C:/Users/Andreas%20Madsen/Desktop/test.html
Linje: 7

IE8:
Detaljer om fejl på websiden

Meddelelse: 'parentNode.parentNode' er null eller ikke et objekt
Linje: 7
Tegn: 4
Kode: 0

Kode:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>TEST</title>
<script type="text/javascript">
function foo(oLnk) {
var oTr = oLnk.parentNode.parentNode;
var oTbdy = oTr.parentNode;
var oNewTr = oTr.cloneNode(true);
oTbdy.insertBefore(oNewTr, oTr);
}
</script>
</head>
<body>
<table id="dom">
<tr>
<td><a href="java script:foo(this)">TEST</a><td><td>tekst<td>
</tr>

<tr>
<td><a href="java script:foo(this)">TEST</a><td><td>tekst<td>
</tr>
<tr>
<td><a href="java script:foo(this)">TEST</a><td><td>tekst<td>
</tr>
</table>
</body>
</html>

Synes godt om

olebole Juniormester

11. april 2009 - 20:37 #5

Et under, hvis noget somhelst DOM-kode virker i dét dokument! Hvor er det mon lige, du afslutter et td-element? ;o)

Anyway, så peger this i en href mod window objektet i IE. Prøv dette i stedet:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>TEST</title>
<script type="text/javascript">
var nInx = 0;
function foo(oLnk) {
var oTr = oLnk.parentNode.parentNode;
var oTbdy = oTr.parentNode;
var oNewTr = oTr.cloneNode(true);
oNewTr.getElementsByTagName("td")[1].firstChild.nodeValue = "Ny række " + (++nInx);
oTbdy.insertBefore(oNewTr, oTr);
}
</script>
</head>
<body>
<table id="dom">
<tr>
<td><a href="#" onclick="foo(this);return false" onclick="foo(this);return false">TEST</a></td><td>tekst</td>
</tr>

<tr>
<td><a href="#" onclick="foo(this);return false">TEST</a></td><td>tekst</td>
</tr>
<tr>
<td><a href="#" onclick="foo(this);return false">TEST</a></td><td>tekst</td>
</tr>
</table>
</body>
</html>

Synes godt om

olebole Juniormester

11. april 2009 - 20:40 #6

- og nu skal du ikke være næbbet og påstå, det er en kode, du har copy/pasted fra mit indlæg! *LoL* ;D

Synes godt om

andreas13_fam Nybegynder

11. april 2009 - 22:29 #7

Jeg tror ikke jeg er den eneste der er blevet lidt træt, eller også er din computer meget tungnem. For hvad skal du med 2 onclick="..." :D

<td><a href="#" onclick="foo(this);return false" onclick="foo(this);return false">TEST</a></td><td>tekst</td>

Synes godt om

andreas13_fam Nybegynder

11. april 2009 - 22:30 #8

Når men point til dig :)

Synes godt om

andreas13_fam Nybegynder

11. april 2009 - 22:31 #9

og jeg kunne jo også have valgt at gøre det med innerHTML (hvordan ved jeg ikke) bare for at drille dig :D

Synes godt om

olebole Juniormester

12. april 2009 - 20:37 #10

Det var som s*t*n! ;D

Synes godt om

olebole Juniormester

12. april 2009 - 20:38 #11

#7 >> ondblclick ;D

Synes godt om

andreas13_fam Nybegynder

12. april 2009 - 21:58 #12

ingen programmør uden sjuskekode, eller suppe som du kalder det :D
Bare de andre ikke ved det ;)

Synes godt om

andreas13_fam Nybegynder

12. april 2009 - 22:01 #13

PS: jeg er bange for at jeg ikke forstår hurmoren bag ondblclick. Med mindre det er ondblclick

Synes godt om

olebole Juniormester

13. april 2009 - 16:50 #14

ondblclick => on-double-click ;o)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Validering af filnavn i formular Af Strawberry i JavaScript	8	14/04/202610:11	I går 11:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript	2	03/02/202614:19	04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript	9	18/04/202516:52	22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript	2	14/02/202511:47	27/06/202514:34
Sæt vindue størrelse Af poulmadsen i JavaScript	1	08/10/202417:18	13/10/202412:33

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS