Reset count for each table

May 16, 2022

I have multiple tables in my html. The tables have the columns with class "valuation" and valuation_all".
If one of the two cells in "valuation" contains FAIL, than the cell with "valuation_all" should change the text from "status" to "FAIL". Otherwise it should show PASS.
This works for one table, but I don’t know how to get this for each table. I tried it with jQuery .each(".taglist") but its not working. I think I have to reset the variable count. For each table the variable should be resetted to zero and than start counting. Now the it keeps counting and does not change the status cell properly.

One of the tables: (other tables are identical just other ID)

<p>
<table id="results1" class="taglist">
<th>Name</th><th>result</th>
<tr>
    <td class="valuation">FAIL</td><td class="valuation_all" rowspan=2>status</td>
</tr>
<tr>
    <td class="valuation">PASS</td>
</tr>
</table>
</p>

jQuery:

$(document).ready(function() {
var count= 0;
  $('table.taglist').each(
    
    function() {

      var count= $(".valuation:contains('FAIL')").length
      
      if(count> 0) {
        $(".taglist td:contains('status')").html("FAIL");
        
        }else{
        $(".taglist td:contains('status')").html("PASS");

        }
    }); 
});

Every help is appreciated!

>Solution :

You can use this to solve it.

$(document).ready(function() {
  var count = 0;
  $('table.taglist').each(
    function() {
      var count = $(".valuation:contains('FAIL')",this).length
      $("td:contains('status')", this).html(count > 0 ? "FAIL" : "PASS");
    });
});

The main problem is that your selectors is not referring to the table your are "inside". By doing $(".valuation:contains('FAIL')",this) you tell the selector (".valuation:contains('FAIL')") to search for this inside your table

Demo

$(document).ready(function() {
  var count = 0;
  $('table.taglist').each(
    function() {
      var count = $(".valuation:contains('FAIL')",this).length
      $("td:contains('status')", this).html(count > 0 ? "FAIL" : "PASS");
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="results1" class="taglist">
  <th>Name</th>
  <th>result</th>
  <tr>
    <td class="valuation">FAIL</td>
    <td class="valuation_all" rowspan=2>status</td>
  </tr>
  <tr>
    <td class="valuation">PASS</td>
  </tr>
</table>


<table id="results2" class="taglist">
  <th>Name</th>
  <th>result</th>
  <tr>
    <td class="valuation">PASS</td>
    <td class="valuation_all" rowspan=2>status</td>
  </tr>
  <tr>
    <td class="valuation">PASS</td>
  </tr>
</table>