Search code examples
javascriptmootools

Get Element with Mootools css selector for same element with same id

I have a table which has several links in td tag with the same id,can I get the link's inner html respectively.I want to know

  1. Why cant I add events with all the same elements with same id as $$('#update_room_link') but class selector as $$('.update_room_link') works
  2. 2.How to get the innerhtml for respective links. Same id but different innerhtml upon clicking links, heres the jsfiddle

the is what I want -

<table>
    <tr>
        <td> <a href="javascript:void(0)" class="update_room_link">Edit</a>

        </td>
        <td> <a href="javascript:void(0)" class="update_room_link">Delete</a>

        </td>
        <td> <a href="javascript:void(0)" class="update_room_link">Add</a>

        </td>
    </tr>
</table>

javascript tried as

$$('#update_room_link').addEvent('click', function () {
    alert();// get innerHtml of Edit,Delete or Add as clicked

})

Questions updated
I have a html SELECT in a table row,this row has many table data.I want to get the value/innerhtml of a table data which has its id set (and within the SAME row).Or how can I get an immediate grand-parent of a child FROM a child..is it possible 

<tr> 
<td id="id">100</td> 
<td>Australi</td> 
<td>BAT</td> 
<td>2014-02-23</td> 
<td>pending</td> 
</tr>

enter image description here

I want the innerhtml of name of the SELECTED option. All the select has same class name.

Solution

  • The ID must be unique in a html element, that's why you can not use the same ids on your a tags so $$('#update_room_link') is for all elements.

    You can use the class and can get inner html like this

    $$('.update_room_link').addEvent('click', function () {
    alert(this.innerHTML); //here you will get the respective inner HTML
})

    DEMO

    Please see ID shold be unique

    If you want use id then it should be unique, in that case you will have to attach each function independntly, which is not good practice, like

    $$('#update_room_link1').addEvent('click', function () {....
$$('#update_room_link2').addEvent('click', function () {....