views:

1816

answers:

4

Hello,

given this html code:

<td><img class='del' id='4' src='images/delete.gif'></td>

I am in trouble understanding how to complete the following code:

$(document).ready(
    function(){ 
     setup();       
    }
);

function setup(){
    $("#deleteForm").hide();
    $("img.del").bind('click', formDisplay);
}   

function formDisplay(){
   $("#deleteForm").show();
}

Here I need to pass to the callback the value of the id attribute of the image element but I have some problem to understand how this or $('this') work in jQuery

Still better, I would like to have html code this way:

<tr id='4'>
   <td>...</td><td>...</td><td><img class='del' src='images/delete.gif'></td>
</tr>

being able to get the value of each of the child of the <tr> element identified by its id from within the callback.

Has someone some advices?

Many thanks

+1  A: 
$(document).ready( function(){ 
    setup(); 
});

function setup() { 
    $("#deleteForm").hide(); 
    $("img.del").bind('click', formDisplay); 
} 

function formDisplay() { 
    $("#deleteForm").show();
    $(this).attr('id');  // this is the image Id
    $(this).closest('tr').attr('id');  // this is the tr Id
}
bendewey
+1  A: 

Just re-formatting bendewey's answer:

jQuery(function($) {
    $("#deleteForm").hide(); 
    $("img.del").click(function() { 
        $("#deleteForm").show();
        $(this).attr('id');  // this is the image Id
    })
});
nickf
A: 

Something like this (method structure removed for clarity):

$(document).ready(function(){
    $("deleteForm").hide();

    $("img.del").click(function(){
        $("#deleteForm").show();
        $(this).id; // I can't remember if this is cross-platform or not, but you get the idea...
    }
});
Robert Grant
I totally combine your two answers into 1 :D
Robert Grant
(btw I hadn't seen them before I posted, etc etc)
Robert Grant
I don't think $(this).id will work. the not wrapped version would work for sure this.id.
bendewey
Yeah true, I'm being dumb. Apparently my post was edited as well, although I can't quite see where. Or why.
Robert Grant
A: 

Here's small example. This method works for any parent tags.

If you click all three buttons one by one output should be (please note that console.log() is Firebug function, you can replace it with alert if dont have Firebug installed):

  • td
  • div
  • body

Please note the last result. TD without table is not considered as parent in this case.

Here's the code:

<body class="body">

<script type="text/javascript">

    $(document).ready(function(){
        setup();
    });

    function setup() {
        $("#deleteForm").hide();
        $("img.del").click(formDisplay);
    }

    function formDisplay() {
        $("#deleteForm").show();
        var p = $(this).parent(); // parent tag
        p.attr('id');  // this is the image id -- what you need
        console.log(p.attr("class")); // show parent element class to show difference
    }

</script>

<table class="table">
<tr class="tr">
<td class="td"><img class='del' id='4' src='images/delete.gif'></td>
</tr>
</table>

<div class="div"><img class='del' id='5' src='images/delete.gif'></div>

<td class="td"><img class='del' id='6' src='images/delete.gif'></td>

<div id="deleteForm">text</div>

</body>

Hope this helps.

Sergii