Find div element and replace the value-innerhtml using jquery

Question

Iam having the following table structure.

HTML:  
<table>
 <tr>
  <td>
   <img id='imgScheduled' onclick='start();'/>
  </td>
  <td>
   <div class='divStatus'>Scheduled</div>
  </td>
 </tr>
</table>
..Same table structure repeated

The above table is defined dynamically where in the img ids are also generated dynamically. I would like to change the divStatus value on the click of img which has some functionality i.e status needs to be changed to "inprogress' using jquery just like $("#imgid").closest something, am not sure.

Do the img elements have a predictable pattern?

David Thomas
– David Thomas

2014-04-12 13:19:18 +00:00
Commented Apr 12, 2014 at 13:19 — David Thomas
– David Thomas, Commented Apr 12, 2014 at 13:19

Amit Joki · Accepted Answer · 2014-04-12 13:36:14Z

3

How about this?

$('body').on('click','td > img',function(){
   $(this).closest('tr').find('.divStatus').html('in progress..');
});

edited Apr 12, 2014 at 13:36

answered Apr 12, 2014 at 13:20

Amit Joki

59.4k7 gold badges80 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Ehsan Sajjad Over a year ago

you can test it in fiddle

David Thomas Over a year ago

You're aware the img and span are in different parent elements, right?

Flo Schild Over a year ago

I think closest('tr') is cleaner than parent().parent() in fact. Good job !

Ehsan Sajjad Over a year ago

@flo you when you use parent its fine when someone else uses its not good approach LoL

Amit Joki Over a year ago

@EhsanSajjad, the mistake in your answer wasn't with parent.parent It was with live()

|

Flo Schild · Accepted Answer · 2014-04-12 13:37:04Z

1

Bind a click on your image, and find the .divStatus, then change its content !

Remember .text() will espace your argument, instead of .html() that will render DOM elements !

http://jsfiddle.net/XL5Ew/

$(function () {
    $(document).on('click', '#imgScheduled', function (e) {
        $(this).parent().parent().find('.divStatus').text('in progress...');
        // Or with elements
        $(this).parent().parent().find('.divStatus').html($('<span>').text('in progress...'));
    });
});

edited Apr 12, 2014 at 13:37

answered Apr 12, 2014 at 13:19

Flo Schild

5,3144 gold badges45 silver badges56 bronze badges

2 Comments

Flo Schild Over a year ago

Not for long I think :)

David Thomas Over a year ago

You're aware the img and span are in different parent elements, right?

Collectives™ on Stack Overflow

Find div element and replace the value-innerhtml using jquery

2 Answers 2

9 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related