Bulk change HTML content using jQuery

Question

I have several tds, with ids = row[0], row[2] row[4] and so on.

<td id="row[4]">02:45</td>
<td id="row[6]">03:45</td>

The content in these are times like 03:45, 04:45 which I want to change to 03:15, 04:15 etc. using jQuery.

EDIT:

I ended up with this:

 jQuery('td[id^="row"]').each(function(){
    min = parseInt(jQuery(this).text().substr(3,2)) + 30;
    min %= 60;
    new_time = jQuery(this).text().substr(0,3) + min;
    jQuery(this).text(new_time);
  });

Is there a neater way to do this now ?

Answer 1

You can use starts with selector ^ like this:

$('td[id^="row"]').each(function(){
   $(this).text('your text...');
});

The code above goes over each td whose id starts with row.

More Info:

• http://api.jquery.com/attribute-starts-with-selector/

Answer 2

It depends on how you are accessing the cells. They can simply be named serially if they don't hint about their content at all. Assuming you've got that taken care of, the syntax for changing a (correctly named) element is

$('#your_id').html('text or HTML string here');

or

$('#your_id').text('text or HTML string here');

to replace only the text therein.

Answer 3

Another solution.. Since you only want to change the text inside the td s, try this...

$('#myTable td').text( function (i, oldValue) {
    return oldValue.replace('45', '15');
});

You could also use the selector suggested by @Sarfaz instead.

Untested, but I believe it should work.

Answer 4

Thanks for your response... I ended up with this... Is there a neater way to do it now ? I wanna make 01:00 to 01:30, 01:15 to 01:45, 01:30 to 01:00 and 01:45 to 01:15

 jQuery('td[id^="row"]').each(function(){
    min = parseInt(jQuery(this).text().substr(3,2)) + 30;
    min %= 60;
    new_time = jQuery(this).text().substr(0,3) + min;
    jQuery(this).text(new_time);
  });