CODEWITHSUNDEEP
javascripthtml
Magnus K
Magnus K

Reputation: 43

How are these clickable html items made clickable without an a-html-tag?

I'm trying to understand an existing web site. The site seems to be built using php, javascript and html. One table in a generated html page contains a lot of players, including rank, name, club etc. The player name is clickable and a click will give further information about that player. I just don't understand why the name is clickable, and what code that states what should happen when you click, since no a-html-tag etc is present in table. There must be some php/javascript/html magic at work here that I do not understand.

Below is an extract of the html code for the table, for the first of 500 players, where the player name "Persson, Jörgen" will become clickable.

  <table>
        <tr><td colspan='2'>Placering</td><td>Namn</td><td>Född</td><td>Klubb</td><td colspan='2'>Poäng</td></tr>

<tr><td class='hoyre'>WR43 1</td><td>(1)</td><td><span class='rml_poeng' id='rml:41118:159:0'>Persson, Jörgen</span></td>
        <td>1966</td><td>Halmstad BTK</td><td class='hoyre'>2516</td><td>(-22)</td></tr>

To reach the site and the table:
* Go to http://www.cupassist.com/pa/login.php
* Click on the blue and yellow logo with the text "SVENSKA BORDTENNISFÖRBUNDET"
* Click on "Ranking"
* Click on "Listor"

Now you should see a list of 500 players. You can now show the page source for this page to view the full code that the extract above was taken from.

Upvotes: 0

Views: 131

Answers (1)

James Allardice
James Allardice

Reputation: 166031

JavaScript is used to bind a click event handler to the element (in this case, all span elements with a class named rml_poeng):

'span.rml_poeng' : function(element)
{
    element.onclick = function(e)
    {

        id = this.id;
        vis_poengdet(e, id);
    } 
}

An example of one of the clickable cells:

<span class="rml_poeng" id="rml:41118:159:0">Persson, Jörgen</span>

The JavaScript uses some library that appears to be called behaviour.js, which allows the selection of DOM elements using CSS style selectors (much like jQuery does).

You could dig further to find the implementation of the vis_poengdet function. Just use Firebug or Chrome developer tools.

Upvotes: 2

Related Questions