[js dom2] element toevoegen aan een willekeurige tabelcel - Softwareontwikkeling

woensdag 8 februari 2006 14:28

Acties:

Verwijderd

Topicstarter

Eigenlijk zegt de topictitel alles al.

Ik wil me wat meer verdiepen in DOM2.
Het lijkt me redelijk te lukken, maar werken met tabellen wil nog niet zo.

Als ik de focus krijg op een input-field wil ik dus dat achter het betreffende input-field een afbeelding wordt getoond. (vraag me niet waarom, maar ik wil dat op deze manier kunnen doen).

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>dom2</title>
<script type="text/javascript">
<!--
function setImage(theName){
    var theImg = document.createElement('img');
    theImg.setAttribute('name','img'+theName);
    theImg.setAttribute('id','img'+theName);
    theImg.setAttribute('alt','');
    theImg.setAttribute('src','http://www.nu.nl/img/pijl_trans.gif');
    // Wat moet ik dus hier zetten ?! xxx.appendChild(theImg);
    theImg = null;  
    return true;
    
}
//-->
</script>
</head>

<body>
<form>
<table>
<colgroup>
 <col style="width: 100px;" />
 <col style="width: 200px;" />
</colgroup>
 <tbody>
  <tr>
   <td>Veld 1</td>
   <td><input type="test" name="veld1" id="veld1" onfocus="javascript:setImage('veld1');" /></td>
  </tr>
  <tr>
   <td>Veld 2</td>
   <td><input type="test" name="veld2" id="veld2" onfocus="javascript:setImage('veld2');" /></td>
  </tr>
  <tr>
   <td>Veld 3</td>
   <td><input type="test" name="veld3" id="veld3" onfocus="javascript:setImage('veld3');" /></td>
  </tr>
 </tbody>
</table>
</form>
</body>
</html>

Ik moet dus zien te achterhalen welk object de td is waar het betreffende input field staat.
Maar als ik bijvoorbeeld onclick="javascript:alert(this.parentNode) toevoegen aan een input veld, krijg ik te zien dat het input field geen parentNode heeft?!

Nu zou ik wel de td een id kunnen geven, maar ik wil de html zo clean/kort mogelijk houden.

EDIT:
sjonge jonge ... heel de tijd kom ik er niet uit ... en opeens plopt de oplossing ...

this.parentNode.appendChild(theImg);

[ Voor 42% gewijzigd door Verwijderd op 08-02-2006 14:34 ]

woensdag 8 februari 2006 15:50

Acties:

cyberstalker

Eersteklas beunhaas

Wat je nu in de onfocus doet, is eigenlijk fout. Je hoort daar sowieso geen javascript: in te zetten. Die kan dus sowieso weg. De inhoud wordt namelijk sowieso al als javascript gezien. Daarnaast is javascript geen geregistreerd protocol, dus slaan al die javascript: links helemaal nergens op.

Verder, als je de code zo clean mogelijk wilt houden zou je eigenlijk, net zoals CSS de opmaak van de content scheidt, de javascript in een apart bestand moeten doen.

Je include dat bestand dan vanuit de head, en roept een centrale functie aan. Bijvoorbeeld zoiets:

HTML:

1 2	<script type="application/x-javascript" src="jsbestand.js" /> <script type="application/x-javascript">window.addEventListener('load', 'init', false)</script>

Vervolgens voeg je vanuit de init functie in je js-bestand listeners toe aan je textboxen. Wat jij doet is nauwelijks DOM2 te noemen.

[ Voor 17% gewijzigd door cyberstalker op 08-02-2006 15:50 ]

Ik ontken het bestaan van IE.

woensdag 8 februari 2006 15:51

Acties:

Verwijderd

vergeet overigens ook niet in xhtml je script in een CDATA section te zetten

woensdag 8 februari 2006 15:55

Acties:

Verwijderd

Topicstarter

jajaja, dit is een TEST bestand ... daarom ff snel zo ...
In mn applicatie doe ik het ook allemaal zo, maar dit is ff een test bestandje ...
gaat toch puur en alleen om dat toevoegen van een element aan die tabelcel en nu is dat wel gelukt met DOM2 en idd met AddEvent

Ik heb nu de JavaScript code tussen CDATA gezet ... maar dan werkt het niet meer in Internet Explorer.
Zet ik het niet tussen CDATA dan werkt het wel gewoon netjes zonder foutmeldingen.

dus:
<script type="application/x-javascript">
//<![CDATA[
...................
//]]>
</script>

mmm, ligt aan de type-aanduiding

[ Voor 109% gewijzigd door Verwijderd op 08-02-2006 16:07 ]

donderdag 9 februari 2006 15:07

Acties:

cyberstalker

Eersteklas beunhaas

Als je het juiste mimetype voor javascript opgeeft, werkt het inderdaad niet in Internet Exploder. Maar dat maakt in dit geval niet uit, omdat XHTML sowieso niet in IE werkt.

Ik ontken het bestaan van IE.