jqueryloopsnextuntil

Using jQuery to iterate rows until reaching a specific element

I have a table like this: 

<table class="wide" id="rbi_gridTable_0">
<thead>
    <tr class="objectListHeader">
        <th>Item Name</th>
        <th>Yes or No</th>
    </tr>
</thead>
<tbody>
    <tr class="groupRow" id="groupRow0"><td colspan="2"><b>CATEGORY 0</b></td><td><b>Yes <a href="javascript:jl_no(0);">No</a></b></td></tr>
    <tr id="rbi_gridRow_0_0">
        <td>Line item 0</td>
        <td id="rbi_grid_0_0_Met_NotMet">
            <input type="radio" name="Met_NotMet_0_0" code="Y">Yes<br/>
            <input type="radio" name="Met_NotMet_0_0" code="X">No
        </td>
    </tr>
    <tr id="rbi_gridRow_0_1">
        <td>Line item 1</td>
        <td id="rbi_grid_0_1_Met_NotMet">
            <input type="radio" name="Met_NotMet_0_1" code="Y">Yes<br/>
            <input type="radio" name="Met_NotMet_0_1" code="X">No
        </td>
    </tr>
    <tr id="rbi_gridRow_0_2">
        <td>Line item 2</td>
        <td id="rbi_grid_0_2_Met_NotMet">
            <input type="radio" name="Met_NotMet_0_2" code="Y">Yes<br/>
            <input type="radio" name="Met_NotMet_0_2" code="X">No
        </td>
    </tr>
    <tr class="groupRow" id="groupRow1"><td colspan="2"><b>CATEGORY 1</b></td><td><b>Yes <a href="javascript:jl_no(1);">No</a></b></td></tr>
    <tr id="rbi_gridRow_0_3">
        <td>Line item 3</td>
        <td id="rbi_grid_0_3_Met_NotMet">
            <input type="radio" name="Met_NotMet_0_3" code="Y">Yes<br/>
            <input type="radio" name="Met_NotMet_0_3" code="X">No
        </td>
    </tr>
    <tr class="groupRow" id="groupRow2"><td colspan="2"><b>CATEGORY 2</b></td><td><b>Yes <a href="javascript:jl_no(2);">No</a></b></td></tr>
    <tr id="rbi_gridRow_0_4">
        <td>Line item 4</td>
        <td id="rbi_grid_0_4_Met_NotMet">
            <input type="radio" name="Met_NotMet_0_4" code="Y">Yes<br/>
            <input type="radio" name="Met_NotMet_0_4" code="X">No
        </td>
    </tr>
</tbody>    
</table>

I want to be able to click on the "NO" link in each Category Row and, when clicked, call jl_no(). The radio fields below that Category Row should be set to NO (code="X").

However, I want to stop setting the NO radio field when we reach the next Category Row. The point of this is to allow the user to Select NO in the category header and this will check all NO boxes for that category only.

For example:

Here's what I tried so far: 

function jl_no(idx)
{
    $('#rbi_gridTable_0 tr').each(function (i, row){
        console.log(i,row);
        console.log($(this).attr("id"));

        //stop when we get to the next #groupRow
        if($(this).attr("id") == "groupRow"+(idx+1))
        {
            return;
        }

        $("[name='Met_NotMet_0_" + idx + "'] [code='X']").prop("checked",true);
    });
}
Solution

  • Get the row of the "No" that was clicked; then look at subsequent rows (using .next()) until you find one with the 'groupRow' class.

    function jl_no(idx) {
  var prevTr = $('#groupRow' + idx),
      nextTr = prevTr.next('tr');

  while ((nextTr.length > 0) && !nextTr.hasClass('groupRow')) {
    $("input[code='X']", nextTr).prop('checked', true);

    prevTr = nextTr;
    nextTr = prevTr.next('tr');
  }
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="wide" id="rbi_gridTable_0">
  <thead>
    <tr class="objectListHeader">
      <th>Item Name</th>
      <th>Yes or No</th>
    </tr>
  </thead>
  <tbody>
    <tr class="groupRow" id="groupRow0">
      <td colspan="2"><b>CATEGORY 0</b></td>
      <td><b>Yes <a href="javascript:jl_no(0);">No</a></b></td>
    </tr>
    <tr id="rbi_gridRow_0_0">
      <td>Line item 0</td>
      <td id="rbi_grid_0_0_Met_NotMet">
        <input type="radio" name="Met_NotMet_0_0" code="Y">Yes<br/>
        <input type="radio" name="Met_NotMet_0_0" code="X">No
      </td>
    </tr>
    <tr id="rbi_gridRow_0_1">
      <td>Line item 1</td>
      <td id="rbi_grid_0_1_Met_NotMet">
        <input type="radio" name="Met_NotMet_0_1" code="Y">Yes<br/>
        <input type="radio" name="Met_NotMet_0_1" code="X">No
      </td>
    </tr>
    <tr id="rbi_gridRow_0_2">
      <td>Line item 2</td>
      <td id="rbi_grid_0_2_Met_NotMet">
        <input type="radio" name="Met_NotMet_0_2" code="Y">Yes<br/>
        <input type="radio" name="Met_NotMet_0_2" code="X">No
      </td>
    </tr>
    <tr class="groupRow" id="groupRow1">
      <td colspan="2"><b>CATEGORY 1</b></td>
      <td><b>Yes <a href="javascript:jl_no(1);">No</a></b></td>
    </tr>
    <tr id="rbi_gridRow_0_3">
      <td>Line item 3</td>
      <td id="rbi_grid_0_3_Met_NotMet">
        <input type="radio" name="Met_NotMet_0_3" code="Y">Yes<br/>
        <input type="radio" name="Met_NotMet_0_3" code="X">No
      </td>
    </tr>
    <tr class="groupRow" id="groupRow2">
      <td colspan="2"><b>CATEGORY 2</b></td>
      <td><b>Yes <a href="javascript:jl_no(2);">No</a></b></td>
    </tr>
    <tr id="rbi_gridRow_0_4">
      <td>Line item 4</td>
      <td id="rbi_grid_0_4_Met_NotMet">
        <input type="radio" name="Met_NotMet_0_4" code="Y">Yes<br/>
        <input type="radio" name="Met_NotMet_0_4" code="X">No
      </td>
    </tr>
  </tbody>
</table>