Question

我有一张这样的表：

<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>

我希望能够点击＆＃34; NO＆＃34;链接到每个类别行，并在单击时调用jl_no()。分类行下方的无线电字段应设置为NO（代码=＆＃34; X＆＃34;）。

但是，当我们到达下一个类别行时，我想停止设置NO无线电字段。这一点是允许用户在类别标题中选择NO，这将仅检查该类别的所有NO框。

例如：

单击（类别0）行中的NO链接应设置#rbi_gridRow_0_0，#rbi_gridRow_0_1和#rbi_gridRow_0_2的NO无线电字段。
单击（类别1）行中的NO链接应仅为#rbi_gridRow_0_3设置NO无线电字段。

这是我到目前为止所尝试的内容：

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);
    });
}

Answer 1

获取＆＃34; No＆＃34;点击了;然后查看后续行（使用.next()），直到找到具有＆＃39; groupRow＆＃39;类。

＆＃13;

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');
  }
}

＆＃13;

<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>

＆＃13;

使用jQuery迭代行直到到达特定元素

1 个答案: