[dhtml] innerHTML aanpas probleempje - Softwareontwikkeling

dinsdag 9 juli 2002 10:10

Acties:

poke-1,170

Topicstarter

ik heb de volgende code:

code:

<html>
<head>
    <title>test</title>
    
<script language="javascript">
function addrow(){
  strRows="<tr><td>1</td><td>2</td></tr>"
  rows.innerHTML=strRows
  alert(rows.innerHTML)
}
</script>   
    
</head>

<body>

<table border="1">
<tr><td>Cell 1</td><td>Cell 2</td></tr>
<tr><td>Cell 2</td><td>Cell 3</td></tr>
<tr><td>Cell 4</td><td>Cell 5</td></tr>
<tr><td>Cell 6</td><td>Cell 7</td></tr>
<div id="rows">hier</div>
</table>

<a href="javascript:addrow()">Klik</a>

</body>
</html>

Zoals je kunt zien pas ik de div met ID="rows" aan en zet er "<tr><td>1</td><td>2</td></tr>" neer . Echter zegt de IE dat alleen de inhoud tussen de tags en de close tags is neergezeten. Iemand enig idee waardoor dit komt en hoe het op te lossen is?

dinsdag 9 juli 2002 10:12

Acties:

Bosmonster

*zucht*

Simpel uitgelegd: De tabel loopt niet door in de div-tag. Maak liever een losse <tr> welke je in zn geheel onzichtbaar maakt (display:none).

Of als ik nog even naar je code kijk.. Gebruik createElement oid om nieuwe rows aan te maken.. dit is trouwens al een paar keer voorbij gekomen, dynamisch rows aan maken in een tabel.

[edit]
fuck HTML-rechten

dinsdag 9 juli 2002 10:14

Acties:

Vampier

poke-1,170

Topicstarter

Thanx bos... ik was echter wat in de code vergeten... bij elke druk op de knop moet er een nieuwe row bijkomen... dus de <div id="rows"></div> moet ook worden meegenomen.

Ik denk dat ik het echter op een andere manier moet oplossen. (appendchild zoals met XML)

dinsdag 9 juli 2002 10:21

Acties:

drm

f0pc0dert

code:

1 2	document.getElementById ( 'tableID' ).appendChild ( tr = document.createElement ( 'tr' ) ); tr.appendChild ( document.createElement ( 'td' ) );

etc.

Of gewoon de innerHTML van de tabel aanpassen

code:

1	document.getElementById ( 'tableID' ).innerHTML += '<tr><td colspan="2">melp</td></tr>';

Music is the pleasure the human mind experiences from counting without being aware that it is counting
~ Gottfried Leibniz

dinsdag 9 juli 2002 10:24

Acties:

Bosmonster

*zucht*

Op dinsdag 09 juli 2002 10:21 schreef drm het volgende:

code:

1 2	document.getElementById ( 'tableID' ).appendChild ( tr = document.createElement ( 'tr' ) ); tr.appendChild ( document.createElement ( 'td' ) );

etc.

Ik dacht dat jij van de nette code was?

En dan definieer je variabelen in parameters... tssssss

dinsdag 9 juli 2002 10:26

Acties:

drm

f0pc0dert

Bosmonster:
Ik dacht dat jij van de nette code was?

ik ben van de nette code als ik er zin in heb, jah

En dan definieer je variabelen in parameters... tssssss

Niks mis mee toch?

Music is the pleasure the human mind experiences from counting without being aware that it is counting
~ Gottfried Leibniz

dinsdag 9 juli 2002 10:48

Acties:

Vampier

poke-1,170

Topicstarter

code:

<html>
<head>
    <title>test</title>
    
<script language="javascript">
function addrow(){
var TR = document.createElement("TR")
var TD = document.createElement("TD")
TD.innerHTML='<input type="text" name="iets" />'
TR.appendChild(TD);

TD = document.createElement("TD")
TD.innerHTML='<input type="text" name="iets" />'
TR.appendChild(TD);

TD = document.createElement("TD")
TD.innerHTML='<input type="text" name="iets" />'
TR.appendChild(TD);

rows.children(0).appendChild(TR)
//alert(show.innerHTML)

}

</script>   
    
</head>

<body>
<div id="show">
<table id="rows">
<tr><td>Cell 1</td><td>Cell 2</td></tr>
<tr><td>Cell 2</td><td>Cell 3</td></tr>
<tr><td>Cell 4</td><td>Cell 5</td></tr>
<tr><td>Cell 6</td><td>Cell 7</td></tr>
</table>
</div>

<a href="javascript:addrow()">Klik</a>

</body>
</html>

Thanx

dinsdag 9 juli 2002 10:51

Acties:

Verwijderd

ikke zit met een soortgelijk (zo niet hetzelfde) probleem

code:

function appendrow() {
    var dbtable = document.getElementById("dbtable");
    var newContent = dbtable.rows[dbtable.rows.length-1].innerHTML;
    newContent = "<TR>"+newContent+"</TR>";
    dbtable.innerHTML += newContent;
}

er moet dus onderaan een tabel een rij bij die dezelfde is als de voorgaande.
alleen dat laatste statement geeft een unknown runtime error, daar heb ik dus niet zoveel aan.

een andere mogelijkheid die ik deed was aan de tabel een rij toevoegen met insertRow(dbtable.rows.length) en vervolgens de innerHTML daarvan vervangen door newContent (zonder die <TR>'s uiteraard nu), zelfde unknown runtime error

dinsdag 9 juli 2002 11:08

Acties:

Bosmonster

*zucht*

Op dinsdag 09 juli 2002 10:51 schreef mophor het volgende:
ikke zit met een soortgelijk (zo niet hetzelfde) probleem
code:
1
2
3
4
5
6
function appendrow() {
    var dbtable = document.getElementById("dbtable");
    var newContent = dbtable.rows[dbtable.rows.length-1].innerHTML;
    newContent = "<TR>"+newContent+"</TR>";
    dbtable.innerHTML += newContent;
}
er moet dus onderaan een tabel een rij bij die dezelfde is als de voorgaande.
alleen dat laatste statement geeft een unknown runtime error, daar heb ik dus niet zoveel aan.

een andere mogelijkheid die ik deed was aan de tabel een rij toevoegen met insertRow(dbtable.rows.length) en vervolgens de innerHTML daarvan vervangen door newContent (zonder die <TR>'s uiteraard nu), zelfde unknown runtime error

Dus? Kijk even naar het scriptje van Vampier, ipv dat we voor jou nog een keer dezelfde vraag moeten gaan beantwoorden

dinsdag 9 juli 2002 11:13

Acties:

Verwijderd

die heb ik ook wel gezien, maar ik vraag me dus af waarom mijn code niet werkt. Die zit toch gewoon netjes in elkaar?
(iig conform drm's tweede mogelijkheid)

en owja, ik zit met een dynamisch gegenereerde tabel waarvan het aantal cellen niet vaststaat. ik kan dus niet een gedefineerd aantal keer een td createn en appenden aan een tr, dus ik dacht slim te zin en de innerHTML van de laaste tr te copieren...

dinsdag 9 juli 2002 11:26

Acties:

Verwijderd

[topic=447085/1/45] ...hielp mij met ongeveer zelfde probleem.

/edit
maar dit ziet er wel beter uit eigenlijk.

dinsdag 9 juli 2002 11:35

Acties:

drm

f0pc0dert

mophor:
en owja, ik zit met een dynamisch gegenereerde tabel waarvan het aantal cellen niet vaststaat.

Maar het aantal cellen van een row kun je wel opvragen:

http://gerard.yoursite.nl/got/mophor/table.php

Music is the pleasure the human mind experiences from counting without being aware that it is counting
~ Gottfried Leibniz

dinsdag 9 juli 2002 11:40

Acties:

Verwijderd

ja, dat weet ik, alleen de inhoud verschilt ook steeds, de ene keer is het een checkbox, de andere keer een div. en het lijkt me nogsteeds omslachtig om elke innerHTML van elke td langs telopen en die in een zelfgecreerde td zetten en vervolgens die td appenden aan een tr die aan een table geappend is. Dat is natuurlijk een mogelijkheid, maar ik snap dus niet waarom het zo niet werkt.

dinsdag 9 juli 2002 12:31

Acties:

drm

f0pc0dert

mophor:
ja, dat weet ik, alleen de inhoud verschilt ook steeds, de ene keer is het een checkbox, de andere keer een div. en het lijkt me nogsteeds omslachtig om elke innerHTML van elke td langs telopen en die in een zelfgecreerde td zetten en vervolgens die td appenden aan een tr die aan een table geappend is. Dat is natuurlijk een mogelijkheid, maar ik snap dus niet waarom het zo niet werkt.

Nee 't doet idd niet wat ik zou verwachten...
http://gerard.yoursite.nl/got/mophor/table2.php

Music is the pleasure the human mind experiences from counting without being aware that it is counting
~ Gottfried Leibniz

woensdag 10 juli 2002 20:28

Acties:

Verwijderd

als iemand nog geinteresseerd is:

code:

1
2
3

var dbtable = document.getElementById('dbtable');
    var newRow = dbtable.lastChild.lastChild.cloneNode(true);
    dbtable.lastChild.appendChild(newRow);

hiermee copieer ik dus de laatste tr van de tabel naar eronder erbij. de eerste lastChild geeft een tBody, waarom weet ik eigenlijk niet, misschien kan iemand dat uitleggen, ik heb geen tBody in m'n source.

woensdag 10 juli 2002 20:46

Acties:

Bosmonster

*zucht*

Op woensdag 10 juli 2002 20:28 schreef mophor het volgende:
als iemand nog geinteresseerd is:
code:
1
2
3
var dbtable = document.getElementById('dbtable');
    var newRow = dbtable.lastChild.lastChild.cloneNode(true);
    dbtable.lastChild.appendChild(newRow);
hiermee copieer ik dus de laatste tr van de tabel naar eronder erbij. de eerste lastChild geeft een tBody, waarom weet ik eigenlijk niet, misschien kan iemand dat uitleggen, ik heb geen tBody in m'n source.

Een tabel is volgens de laatste HTML standaarden opgedeeld in tbody, thead en tfoot. Als je ze vergeet zit gewoon alles in een tbody welke automatisch toegewezen wordt.. vandaar de extra Child.

http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.2.3