Jquery elementen hierarchie

Ik heb een eenvoudig tabelletje

<table border="1">
	<tr class="overzichttabelRij" >
		<td>Affinno</td>
		<td>Den Haag</td>
		<td><input type="button" class="VerwijderBedrijf" value="Verwijderen" /></td>
	</tr>
	<tr class="overzichttabelRij" >
		<td>Shell</td>
		<td>Rijswijk</td>
		<td><input type="button" class="VerwijderBedrijf" value="Verwijderen" /></td>
	</tr>
</table>

en nou wil ik graag dat er op de button’s tooltip komt te staan:
‘verwijdert Affinno uit de tabel’ / ‘verwijdert Shell uit de tabel’ 

Dat leek me een mooi klusje voor Jquery.
Als eerste een stukje code om op de pagina een onload event te binden die alle verwijder buttons (herkenbaar aan de class ‘VerwijderBedrijf’) een tooltip geeft: 

$(".VerwijderBedrijf").each(function() {
   var elementValue = 'dit moet de naam van het bedrijf zijn';
   $(this).attr('title', 'verwijdert ' + elementValue + ' uit de wedstrijd');
});

We zetten hier nog hard de waarde ‘dit moet …’ als waarde van het attribuut ‘title’ op de button (met $(this), zie verder).
Maar hoe bepaal ik nou de naam van het bedrijf uit de cel?
Het moet iets zijn als: van de parent elementen van deze button, neem de rij waar deze in staat, en van die rij, neem van de eerste cel de text.
Het is geworden:

$(".VerwijderBedrijf").each(function() {
   var elementValue = $(this).parents().filter('TR').children(':first').text();
   $(this).attr('title', 'verwijdert ' + elementValue + ' uit de wedstrijd');
});

en we lezen het als volgt: neem van $(this) (dat is het element dat de .each functie steeds aan je geeft en is het element dat op dat moment beschikbaar is binnen de each loop) alle parents.
Dat geeft de TD, de TR, een TBODY, een TABLE en alles wat daar nog boven zou zitten.
Filter die parents op de TR elementen; we hebben nu de rij waar de button in zit.
Neem daarna alle child elementen van die rij, en neem daar de eerste van: dat is de eerste TD.
En neem uit die TD dan de tekst.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s