Question

I have a table similar to this, but with many rows:

<table width=400px id=mytable>
 <tr>
  <td>test one</td>
  <td>yes</td>
  <td>success</td>
 </tr>
 <tr>
  <td>test two</td>
  <td>yes</td>
  <td>none</td>
 </tr>
</table>

The values are populated by a database dynamically. If the 2nd td in each row has a value of yes, how can I change the value of the 3rd td to be say “in progress”? The value is yes as the user has submitted a test but the test is in progress and the value of td3 is none until the database populates td3.

I have this bit of jquery I have used, however it just searches and replaces text based on a cell only, not say the next cell.

$(function() {
    $('#mytable td').each(function() {
        var html = $(this).html();
        $(this).html(
        html.replace(/0/,'<b>success</b>')
             .replace(/1/,'<b>failed</b>')
        );
    });
});

I’ve also been playing with this code, but this doesn’t fit what I want to do as it only updates certain TDs based on the .eq(x) placement.

$(document).ready(function() {
    $('#mytable').find('td').eq(4).text('changeme');
});

My table could has around 20 rows and I would like to do this for every 2nd td in my table

Ideally I would like a throbber but that should be possible once I can interpret the 2nd td values.

Answer 1

This code will go through the td’s, see if a cell has a value ‘none’ and if yes, it sets the value of next cell to ‘in progress’:

$(function() {
    $('#mytable td').each(function() {
        var html = $(this).html();
        if (html == "none")
            $(this).next().html("in progress");
        });
});

Updated code as per comment below:

$(document).ready(function() {
    $('td').each(function() {
        if ($(this).html() == "yes" && $(this).next().html() == "none") {
            $(this).next().html("in progress");
        }
    });
});