[javascript/jQuery] value resetten van TD

Pagina: 1
Acties:

Onderwerpen


Acties:
  • 0 Henk 'm!

Verwijderd

Topicstarter
Ik heb een HTML-pagina met een <select> erin. Bij een change() verandert de text van een bepaalde TD.
Maar hoe kan ik de standaardwaarde (die altijd eerst wordt ingeladen in de HTML) weer in de TD tonen?

Even een versimpeld voorbeeldje:
HTML:
1
2
3
4
5
6
7
8
9
10
<select id='selID'>
    <option>Niks doen></option>
    <option>actie</option>
</select>
<table>
<tr>
    <td>cel1</td>
    <td class="tochange">oude tekst</td>
</tr>
</table>

JavaScript:
1
2
3
4
5
6
7
8
9
<script>
$("select[id='selID']").change(function() {
    $option_val = $("select[id='selID'] :selected").text();
    if ($option_val == 'actie') {
        $("td.tochange").text("nieuwe tekst");
    } else {
        // hier moet dus iets komen waardoor de oorspronkelijke tekst in HTML ('oude tekst') weer terug kan keren
    }
</script>

Acties:
  • 0 Henk 'm!

  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 10-09 08:45
Dan zul je de oorspronkelijke inhoud moeten bewaren.

Je kunt die tekst in een div zetten en die onzichtbaar maken als je andere tekst toevoegt. Of, netter, je kunt de originele content even opslaan via data.

JavaScript:
1
2
3
$('td.tochange').each(function(){
   $(this).data('default',$(this).text());
});


Kun je doen ondocumentready bijvoorbeeld.

[ Voor 32% gewijzigd door Bosmonster op 17-05-2010 12:13 ]


Acties:
  • 0 Henk 'm!

  • Feanathiel
  • Registratie: Juni 2007
  • Niet online

Feanathiel

Cup<Coffee>

Kijk eens naar de .data() methode binnen jQuery. Deze maakt het mogelijk om data op te slaan in een (jQuery-) element, om het eventueel later terug te halen. Let hierbij op dat deze data (logischerwijs) niet meer beschikbaar is, wanneer een pagina wordt ververst. Een andere optie is, om deze waarde op te slaan in een variabele.

Zie: http://api.jquery.com/jQuery.data/

Acties:
  • 0 Henk 'm!

Verwijderd

Topicstarter
Dank voor jullie reply.
Ik heb uiteindelijk gekozen voor de eerste oplossing van Bosmonster
Je kunt die tekst in een div zetten en die onzichtbaar maken als je andere tekst toevoegt.
Dat was voor mij de snelste en makkelijkste oplossing.

Acties:
  • 0 Henk 'm!

  • pieturp
  • Registratie: April 2004
  • Laatst online: 27-08 14:18

pieturp

gaffa!

$.data() is echt niet ingewikkelder dan een hidden div.

Zou er toch 'ns naar kijken als ik jou was. Zeker als je straks eens in een situatie komt te zitten waarbij je met meer dan één element te maken krijgt; je wil dan echt geen hidden div per element aanmaken ;)

... en etcetera en zo


Acties:
  • 0 Henk 'm!

  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 10-09 08:45
De div-oplossing noemde ik eigenlijk specifiek om 1 reden en dat is dat het een betere oplossing is als je meer dan alleen tekst wilt opslaan als default, zoals een complete html-structuur. Dan is het iets efficienter om deze niet de hele tijd weg te halen en weer terug te zetten, maar om hem gewoon te laten staan en onzichtbaar te maken.

In dit geval gaat het alleen om een stukje tekst als ik je voorbeeld bekijk en zou ik zeker eens kijken naar de data-oplossing. Die is daarvoor bedoeld en is juist erg simpel in gebruik.

[ Voor 16% gewijzigd door Bosmonster op 17-05-2010 21:23 ]

Pagina: 1