Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Nov 2009
    Posts
    62
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Jquery different images for different sources

    Hy! I made a table,different information in every row,like:
    PHP Code:

    <table>
    <
    tr>
    <
    td id 'cell1'>Some title</td><td>Some description</td><td>Some name</td>
    </
    tr>
    <
    tr>
    <
    td id 'cell2'>Some title2</td><td>Some description2</td><td>Some name2</td>
    </
    tr>
    <
    tr>
    <
    td id 'cell3'>Some title3</td><td>Some description3</td><td>Some name3</td>
    </
    tr>
    </
    table

    I want a different image for row1,row2,row3 on hover.
    I can do this if i have one row and one picture,but i don't know how can i get the id from the rows with jquery,and how to pass those variable id-s to jquery.
    So how will jqery know which "<td>" triggered the action?

  • #2
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    In your example, jquery can't get the IDs of the rows because you haven't provided them. If you want to toggle images per cell (td), you need to provide jquery with the information necessary to locate each.

    Easy way: set IDs on the TR tags and classes on the TD tags.

    Code:
    <table>
    <tr id="row1">
    <td class="col1">Some title</td><td class="col2">Some description</td><td class="col3">Some name</td>
    </tr>
    <tr id="row2">
    <td class="col1">Some title2</td><td class="col2">Some description2</td><td class="col3">Some name2</td>
    </tr>
    <tr id="row3">
    <td class="col1">Some title3</td><td class="col2">Some description3</td><td class="col3">Some name3</td>
    </tr>
    </table>
    You could use IDs instead of classes on each TD, but this version uses fewer names so it's a little easier to understand. Also, this version is easier to read in English (go to row 2 column 3) which makes it easier to write the jquery for each location. For example, you can access row 2 column 3 with $('#row2 td.col3').hover(myHoverFunction);.

    If you really mean that you only want a different image for each row, then it can be much simpler. But I assume you meant that you want a different image for each cell.
    Are you a Help Vampire?

  • Users who have thanked tomws for this post:

    attasz (12-05-2009)

  • #3
    New Coder
    Join Date
    Nov 2009
    Posts
    62
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Thx,it's exactly what i need.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •