[JScript] href van child in onclick-event parent

[EmilneM]

In een tabelcell staat een hyperlink met als href een javascript-funtie:

code:

<td id="a" onclick="x">
     <a href="javascript:__doPostBack('Calendar1','1671')">29</a>
</td>

Nu wil ik dat het onclick-event van de tablecell (x) hetzelfde is als de href van de child. Deze href is variabel. Volgens mij is dit met javascript voor elkaar te krijgen.

Heeft iemand enig idee hoe? Ik dacht zelf aan een functie met 'child' maar hoe ik dit moet realiseren weet ik niet.

[BtM909]

Je kan click events genereren / simuleren. Moet je alleen nog achterhalen hoe je die child benadert

[Rickets]

Is het misschien handiger om de link even groot te maken als de table-cell? Met display:block; kom je al een eind Dat scheelt een hoop gedoe.

[ Voor 11% gewijzigd door Rickets op 17-08-2004 14:50 ]

[glashio]

HTML:

<td onclick="alert(this.children.item(0).tagName)">

[Guillome]

waarom niet alleen een onclick in de TD en daarin platte text met underline?

HTML:

<td onclick="__doPostBack(blabla);" class="underline_ofzo">
  29
</td>

[ Voor 19% gewijzigd door Guillome op 17-08-2004 15:12 ]

[Verwijderd]

glashio schreef op 17 augustus 2004 @ 15:03:

HTML:

<td onclick="alert(this.children.item(0).tagName)">

doe slim, doe DOM

code:

this.getElementsByTagName('a')[0].href;

(zou idealiter met childNodes collectie moeten, maar ie en andere browsers gaan veschillend met lege textnodes om)

[EmilneM]

Zit ik zo op de goede weg?

code:

<td onclick="this.children.item(0).href;">
   <a href="xxxx">bb</a>
</td>

Hij doet het op deze wijze nog niet....

[Verwijderd]

nee dat werkt niet, zie boven en vervolgens moet je de expressie nog uitvoeren, dus ik denk eerder aan:

code:

eval(this.getElementsByTagName('a')[0].href.split(':')[1]);

maar dit is wel een enge manier om dat uit te voeren, waarom wil je het eigenlijk dubbel hebben? als je op de tekst klikt trigger je ook de onclick van de td, want die bubbled gewoon naar boven

[ Voor 39% gewijzigd door Verwijderd op 17-08-2004 15:38 ]

[EmilneM]

waarom wil je het eigenlijk dubbel hebben? als je op de tekst klikt trigger je ook de onclick van de td, want die bubbled gewoon naar boven

Het gaat om een ASP.NET Calendar-control. De control bestaat uit een table met cells. In elke cell staat een hyperlink die de datum vertegenwoordigt. Ik wil echter dat je niet op de hyperlink hoeft te klikken maar gewoon ergens in de tablecell.

Het is eigenlijk een hele rottige control waaraan je weinig kunt aanpassen. Verder functioneert hij echter prima en ik vind het zonde van de tijd om zelf een control te schrijven.

Eerdergenoemde 'display-block' lijkt mij ook een nette manier. Krijg het alleen niet voor elkaar. Heb in de CSS-stylesheet het volgende opgenomen.

Cascading Stylesheet:

A:link, A:visited, A:active {
  DISPLAY: block;
}

[ Voor 14% gewijzigd door EmilneM op 17-08-2004 15:52 ]

[Rickets]

EmilneM schreef op 17 augustus 2004 @ 15:46:
Eerdergenoemde 'display-block' lijkt mij ook een nette manier. Krijg het alleen niet voor elkaar. Heb in de CSS-stylesheet het volgende opgenomen.

Cascading Stylesheet:

A:link, A:visited, A:active {
  DISPLAY: block;
}

Cascading Stylesheet:

a { display: block }

Dit zou moeten werken, zonder de pseudo-classes :link etc.
Waarschijnlijk moet er nog een andere selector bij, zodat je alleen de <a>'s in je kalender beïnvloedt, in plaats van alle <a>'s in je document.
Bijv. #Calendar a {.. } of iets in die richting

[EmilneM]

Rickets schreef op 17 augustus 2004 @ 15:53:
[...]

Cascading Stylesheet:

a { display: block }

Dit zou moeten werken, zonder de pseudo-classes :link etc.
Waarschijnlijk moet er nog een andere selector bij, zodat je alleen de <a>'s in je kalender beïnvloedt, in plaats van alle <a>'s in je document.
Bijv. #Calendar a {.. } of iets in die richting

mmm.......vaag.....werkt niet. Zelfs niet met !important er achter, iets in de control lijkt het tegen te houden.

[Rickets]

EmilneM schreef op 17 augustus 2004 @ 16:15:
mmm.......vaag.....werkt niet. Zelfs niet met !important er achter, iets in de control lijkt het tegen te houden.

Kun je het probleemgeval online zetten? (de html/css-output iig)

[EmilneM]

Rickets schreef op 17 augustus 2004 @ 16:17:
[...]

Kun je het probleemgeval online zetten? (de html/css-output iig)

Door ASP.NET gegenereerde HTML-output van (een deel van de) Calendar-control:

HTML:

<table id="Calendar1" class="Calendar" cellspacing="0" cellpadding="0" border="0"
 style="border-width:1px;border-style:solid;border-collapse:collapse;">
     <tr> 
          <td class="CalOtherMonthDay" align="Center" 
            onmouseover="JavaScript:this.className='CalOtherMonthDaySelector'" 
            onmouseout="JavaScript:this.className='CalOtherMonthDay'" 
            style="width:14%;cursor:hand;">
                  <a href="javascript:__doPostBack('Calendar1','1668')"
                   style="color:Black">26</a>
          </td>
     </tr>
</table>

Heb om het simpel te houden de table met één cel neergezet.

En een stukje uit de CSS-stylesheet wat ik ff gebruik om te testen.

Cascading Stylesheet:

a {
    display:block !important;
}

[Rickets]

EmilneM schreef op 17 augustus 2004 @ 16:35:

Dan ligt het aan iets anders (wat wij dus niet kunnen zien), want als ik het in een html-document zet, werkt het gewoon
Ook zonder !important.

[crisp]

zet aub geen javascript: in eventhandlers, dat hoort daar niet

om op de eerder genoemde JS oplossing terug te komen: click() is gewoon een method van een anchor die je aan kan roepen, dus je hoeft niet moeilijk te doen met href's uitlezen en evallen.
De CSS optie is echter wel mooier en praktischer; mogelijk dat je het anchor nog een width en height moet geven (100% will do).

[ Voor 4% gewijzigd door crisp op 17-08-2004 16:49 ]

[EmilneM]

crisp schreef op 17 augustus 2004 @ 16:49:
zet aub geen javascript: in eventhandlers, dat hoort daar niet

om op de eerder genoemde JS oplossing terug te komen: click() is gewoon een method van een anchor die je aan kan roepen, dus je hoeft niet moeilijk te doen met href's uitlezen en evallen.
De CSS optie is echter wel mooier en praktischer; mogelijk dat je het anchor nog een width en height moet geven (100% will do).

Heb de anchor een width en height van 100% gegeven in de stylesheet. Werkt idd, zelfs als ik de 'display: block' weglaat. Pakt alleen nog steeds niet de volledige 100% omdat ik padding op een aantal pixels heb staan.

[crisp]

EmilneM schreef op 17 augustus 2004 @ 16:59:
[...]


Heb de anchor een width en height van 100% gegeven in de stylesheet. Werkt idd, zelfs als ik de 'display: block' weglaat. Pakt alleen nog steeds niet de volledige 100% omdat ik padding op een aantal pixels heb staan.

Als je display:block weglaat dan zal een Gecko-browser de height en width negereren. Je padding kan je verhuizen van je TD naar je anchor.

[EmilneM]

crisp schreef op 17 augustus 2004 @ 17:01:
[...]

Als je display:block weglaat dan zal een Gecko-browser de height en width negereren. Je padding kan je verhuizen van je TD naar je anchor.

Netjes!

Heb nog één klein dingetje, wil het graag perfect hebben. Als ik de muiscursor op de left-border van de tablecell plaats wordt de onmouseover van de tablecell al getriggerd (de background van de cell wordt dan een bepaalde kleur zodat de gebruiker ziet waar de cursor staat). Echter, als ik dan klik gebeurt er (logisch) niets omdat de anchor niet over de cellborder staat.

Dit kan de gebruiker misleiden. Het lijkt dat je de datum kunt selecteren, omdat hij verkleurt, maar het kan dan niet. Is hier met CSS nog een oplossing voor te vinden of moet ik hiervoor toch naar de onclick:javascript oplossing....

[EmilneM]

Is het mogelijk om de onclick van de hyperlink uit te zetten met CSS (bijv. bereik op 0%) of JavaScript. Zodat alleen de onclick van de tablecell werkt. Anders gebeurt de onclick dubbel (voor tablecell en hyperlink) en dat vind ik niet erg netjes.

[Verwijderd]

Ik denk dat je even moet zoeken op event bubbling & canceling