How to do this in jQuery?

Question

I have to attach the method copyToLeft on onClick event of all images which are inside the TD. TD is inside the table named mismatchList, so that the structure becomes like this mismatchList > tbody > tr > td > img

Although i have already done this, but that is using plain javascript. What i did was, i manually added copyToLeft(this); method on onClick event of all specified elements at the time of creation. [ This is the step which i want to omit and use jQuery to do this somehow ].

Also definition of copyToLeft goes like this:-

function copyToLeft(obj){
 leftObj = getLeftTD (obj);  // my method which returns the adjacent Left TD
 rightObj = getRightTD (obj);

 if ( leftObj.innerHTML != rightObj.innerHTML ) {   
  leftObj.innerHTML = rightObj.innerHTML;
  leftObj.bgColor = '#1DD50F';
 }else{
  alert ( 'Both values are same' );
 }
}

If required copyToLeft method's definition can also be changed. [ just in case you think, jQuery can be used to make this method better :) ]

---

Edit

Instead of asking another question i am just adding the new requirement :) [ let me know if i am supposed to create new one ]
i have to add copyToLeft method to all images as i specified, but alongwith that image src should be left_arrow.gif, and add copyToRight method if src is right_arrow.gif. Also, how can we get the adjacent left/right TD in jQuery, as i want to replpace my getLeftTD and getRightTD method as well?

Answer 1

If i've understood your question correctly, in jQuery, you'd bind the event as such:

$(document).ready(function() {
    $('mismatchList > tbody > tr > td > img').click(copyToLeft);
});

In your copyToLeft function, you don't accept obj as an input parameter, instead this will be the image. $(this) will be a jQuery object, containing the image, should you require it...

Answer 2

try this code:

<table id="tbl">
    <tbody>
    <tr>
     <td></td><td><img src="file:///...\delete.png" /></td>
    </tr>
    <tr>
     <td></td><td><img src="file:///...\ok.png" /></td>
    </tr>
</tbody>
</table>

<script type="text/javascript">
    $(document).ready(function(){
     $("table#tbl img").click(function(){
      var td=$(this).parents("td");
      var tr=$(td).parents("tr");
      var left=$(td).prev("td");

      $(left).html($(td).html());
     });
    });
</script>

Answer 3

You could do something like this to match the image src.

$('#mismatchList > tbody > tr > td > img[src='left_arrow.gif']').click(copyToLeft);
$('#mismatchList > tbody > tr > td > img[src='right_arrow.gif']').click(copyToRight);

It is worth noting that the part matching the image src does use the entire contents of src, so if you move the images to a different directory it will stop working. If you just want to match the end of source you can use $= instead of just =.

Here's a variation on TheVillageIdiots rewrite of your copy left function.

function copyToLeft() {
    var cell = $(this).closest('td');
    var leftObj = cell.prev();
    var rightObj = cell.next();

    if ( leftObj.html() != rightObj.html()) {                        
        leftObj.html(rightObj.html());
        leftObj.css('background-color','#1DD50F');
    } else {
        alert ( 'Both values are same' );
    }
}

Part of me also thinks it would make sense to just have one copyToSibling function where you check $(this).attr('src') for whether it's left_arrow.gif or right_arrow.gif and act accordingly, rather than the two selectors I posted before.