Toon posts:

[javascript] GetElementByID children ?

Pagina: 1
Acties:

Verwijderd

Topicstarter
Momenteel ben ik bezig met een scriptje voor een nieuwe site van mij, om precies te zijn ben ik al 2 weken (niet fulltime ofcourse :) ) bezig met het script, javascript is mijn zwakste punt..

Wat het script moet doen is niet zooo moeilijk.. Het moet rows toevoegen en verwijderen per row en de values opslaan. 1 row bestaat uit een selectbox + input veld, na het aanmaken van de row kan deze ook weer verwijderd worden via een linkje die naast de row staat.

Ik wil dit als volgt aanpakken:
function addSlice() - voegt een row toe aan de innerhtml van een divje in de html
function removeSlice(ID) - verwijderd de row

Nu lukt dit allemaal aardig, behalve dat als ik de function removeSlice aanroep die de gehele innerHTML verwijderd, terwijl die alleen maar 1 row moet verwijderen.
De rows zitten namelijk in een <div> en elke row heeft ook weer een <div>.. ik wil dus de div-childs verwijderen.

De code ziet er als volgt uit:

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<html>
<head>
<script langauge="javascript">
<!--
function addSlice()
{  
    var playerPrices, ID;
    ID = document.form.divID.value;
    playerPrices += '<div id="pp_'+ID+'">';
    playerPrices += '<table width="400" cellpadding="0" cellspacing="0">';
    playerPrices += '<tr>';
    playerPrices += '<td width="100" class="size12"><b>Players</b></td>';
    playerPrices += '<td colspan="3" class="size12"><b>Total Price</b></td>';
    playerPrices += '</tr>';
    playerPrices += '<tr>';
    playerPrices += '<td>&nbsp;</td>';
    playerPrices += '<td width="85" align="center" class="size12"><u>$ USD</u></td>';
    playerPrices += '<td width="85" align="center" class="size12"><u>&euro; Euro\'s</td>';
    playerPrices += '<td width="130" align="center" class="size12"><u>&pound; Brittish Pounds</u></td>';
    playerPrices += '</tr>';
    playerPrices += '</table>';
    playerPrices += '<table width="400" cellpadding="0" cellspacing="0">';
    playerPrices += '<tr>';
    playerPrices += '<td width="100">';
    playerPrices += '<select class="input" name="players[]">';
    playerPrices += '<option value="">TESTING</option>';
    playerPrices += '</select>';
    playerPrices += '</td>';
    playerPrices += '<td width="85" align="center" class="size12">$ <input type="text" class="input" name="price_u'+ID+'" value="" size="5" maxlength="7"></td>';
    playerPrices += '<td width="85" align="center" class="size12">&euro; <input type="text" class="input" name="price_e'+ID+'" value="" size="5" maxlength="7"></td>';
    playerPrices += '<td width="130" align="center" class="size12">&pound; <input type="text" class="input" name="price_p'+ID+'" value="" size="5" maxlength="7"></td>';
    playerPrices += '<td width="130" align="center" class="size12"><a href="javascript:removeSlice('+ID+')">Verwijderen</a></td>'; 
    playerPrices += '</tr>';
    playerPrices += '</table></div>'; 
    
    divPlayerPrices.innerHTML += playerPrices;
    ID++;
    document.form.divID.value = ID;
}

function removeSlice(ID)
{
  document.getElementById('divPlayerPrices', 'pp_ID' + ID).style.display = 'none';
}
-->
</script>
</head>

<body>
<form method="post" name="form">
<input type="hidden" name="divID" value="1">
<a href="javascript:addSlice()">Klik Hier</a> |

<div id="divPlayerPrices">
</div>

</form>
<!-- div.style.display='none'  -->
</body>
</html>


Ik zou dus graag willen weten hoe ik de div-children kan verwijderen. En verder heb ik nog een probleempje, als ik de function removeSlice() aanroep en vervolgens de function addSlice() aanroep doet die niks meer, er komen geen nieuwe rows meer bij.

Hartelijk dank voor evt. reacties ;)

  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

Vergeet innerHTML en ga je eens verdiepen in echte DOM-methoden zoals createElement, appendChild en removeChild :)

Intentionally left blank


Verwijderd

Topicstarter
Ben er nu al mee bezig, ziet er erg interesssant uit, bedankt voor de tip :)

  • 2
  • Registratie: November 2000
  • Laatst online: 31-03 13:52

2

Kijk vooral hier eens rond:

http://www.xs4all.nl/~ppk/js/

Verwijderd

Topicstarter
Heb ik gedaan 2, is zeer handig voor mij omdat er op staat hoe je table rows kan aanmaken en verwijderen (staat hier: http://www.xs4all.nl/~ppk/js/w3c/table_credel.html), ik zit alleen een beetje nog te klooien met de deleteRows function. Een row aanmaken gebeurt zo: x.insertRow(1).appendChild(newTD.cloneNode(true)) en een row verwijderen gebeurt zo: x.insertRow(1).appendChild(newTD.cloneNode(true)) , maar ik wil een specifieke row kunnen verwijderen. Ik heb namelijk naast elke row een remove-link staan, en ik wil graag dat als je op die link klikt de rij ernaast wordt verwijderd. De huidige situatie is echter dat de laatste row standaard wordt verwijderd. Iemand enig idee hoe je met DOM een specifieke row kan verwijderen uit een table ?

[ Voor 4% gewijzigd door Verwijderd op 26-07-2003 14:26 ]


Verwijderd

Topicstarter
:) laat maar, ik begin het al te begrijpen..
Pagina: 1