CODEWITHSUNDEEP
jquery
user3223509
user3223509

Reputation: 147

Looping through table and changing values in jQuery

This is my tablestructure in jsp

<table id="servicetable">
<tr>
<td colspan="2"><label id="servicename">somelabel</label></td>
<td><label id="status">RUNNING </label></td>
</tr>
<tr>
<td colspan="2"><label id="servicename2">somelabel</label></td>
<td><label id="status">RUNNING </label></td>
</tr>
<tr>
<td colspan="2"><label id="servicename3">somelabel</label></td>
<td><label id="status">RUNNING </label></td>
</tr>
</table>

Now I have to change the value of "RUNNING" to "STOPPED" if my value of "servicename" first td matches another string. Below is the code

     var $all_td_in_a_table = $("#servicetable td:nth-child(1)");//to get all first td's

                  $all_td_in_a_table.each(function(){                  
                       labelText_servicename = $("#servicename").text();
                       labelText_servicename=$.trim(labelText_servicename);
                       if(labelText_servicename.toLowerCase() ==="ABC"){
                       labelText = $("#status").text();
                       $("#status").text("TEST");
                       }
});

I see the variable "all_td_in_a_table" has list of all first td's, but my .each loop is always giving me the first td. Please help.

Upvotes: 0

Views: 2582

Answers (2)

nnnnnn
nnnnnn

Reputation: 150010

The id attribute is supposed to be unique. Where you have duplicates, if you use $("#status") that will just select the first one. You should use classes instead. That is, change this:

<label id="status">RUNNING </label>

...to this:

<label class="status">RUNNING </label>

As far as updating the status within the same row as the corresponding text value, you can use DOM navigation methods to stay within the same row. I would use .closest() to find the parent tr element, then .find() to go back down to that row's status.

Note that within the .each(), you can refer to the current element with this. So all of that in context: 

$("#servicetable td:nth-child(1)").each(function() {
  var currentItem = $(this);
  if (currentItem.text().toUpperCase() === "ABC") {
    currentItem.closest("tr").find(".status").text("STOPPED");
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="servicetable">
  <tr>
    <td colspan="2"><label id="servicename">somelabel</label></td>
    <td><label class="status">RUNNING </label></td>
  </tr>
  <tr>
    <td colspan="2"><label id="servicename2">ABC</label></td>
    <td><label class="status">RUNNING </label></td>
  </tr>
  <tr>
    <td colspan="2"><label id="servicename3">somelabel</label></td>
    <td><label class="status">RUNNING </label></td>
  </tr>
  <tr>
    <td colspan="2"><label id="servicename2">ABC</label></td>
    <td><label class="status">RUNNING </label></td>
  </tr>
</table>

Note that you could also give your servicenameX fields a common class and then select by that instead of #servicetable td:nth-child(1):

$("#servicetable .servicename").each(function() {
  // function body as above

...because then if you restructured your table to put that value in a different column you wouldn't have to change your selector. You'll notice in the working code above I don't actually use the servicenameX id values at all.

Other than what I already covered above to get a working solution, your code didn't work because within the each loop you only ever tested the value of the first row's $("#servicename"), plus you were using .toLowerCase() and then comparing with "ABC".

Upvotes: 1

symlink
symlink

Reputation: 12209

You were almost there. You just need to change .toLowerCase() to .toUpperCase(), and use the index, element paramteres :

$("#servicetable td:nth-child(1)").each(function(i,e) {
    labelText_servicename = $.trim($(e).text());
    if (labelText_servicename.toUpperCase() === "ABC") {
        $(e).closest('td').next().find('#status').html("TEST");
    }
});

https://jsfiddle.net/cj0xLc4s/4/

Upvotes: 0

Related Questions