使用jQuery遍历表格行直至遇到指定元素的实现需求

Got it, let's break down how to implement this functionality exactly as you described—clicking the "NO" link in a category row should check all the NO radio buttons (with code="X") under that category, stopping as soon as we hit the next category row.

Step 1: Structure Your HTML Correctly #

First, make sure your table rows have clear class identifiers so we can target them easily. Here's an example structure:

<table>
  <!-- Category Row 0 -->
  <tr class="category-row">
    <td>Category 0</td>
    <td><a href="#" class="category-no-link" onclick="jl_no(this); return false;">NO</a></td>
  </tr>
  <!-- Items under Category 0 -->
  <tr class="item-row">
    <td>Item 1</td>
    <td><input type="radio" name="item1" code="X" value="NO"> NO</td>
    <td><input type="radio" name="item1" value="YES"> YES</td>
  </tr>
  <tr class="item-row">
    <td>Item 2</td>
    <td><input type="radio" name="item2" code="X" value="NO"> NO</td>
    <td><input type="radio" name="item2" value="YES"> YES</td>
  </tr>

  <!-- Category Row 1 -->
  <tr class="category-row">
    <td>Category 1</td>
    <td><a href="#" class="category-no-link" onclick="jl_no(this); return false;">NO</a></td>
  </tr>
  <!-- Items under Category 1 -->
  <tr class="item-row">
    <td>Item 3</td>
    <td><input type="radio" name="item3" code="X" value="NO"> NO</td>
    <td><input type="radio" name="item3" value="YES"> YES</td>
  </tr>
</table>

Note: I used category-row for the header rows and item-row for the rows with radio buttons—adjust these class names to match your existing code if needed.

Step 2: Implement the jl_no() Function #

Update your jl_no() function to accept the clicked link element, then traverse rows until the next category row is found:

function jl_no(clickedLink) {
  // Get the parent category row of the clicked "NO" link
  const currentCategoryRow = clickedLink.closest('.category-row');
  
  // Start checking the row immediately after the category row
  let nextRow = currentCategoryRow.nextElementSibling;

  // Loop through rows until we hit another category row or run out of rows
  while (nextRow && !nextRow.classList.contains('category-row')) {
    // Find the NO radio button (code="X") in the current item row
    const noRadioButton = nextRow.querySelector('input[type="radio"][code="X"]');
    
    // If the radio button exists, check it
    if (noRadioButton) {
      noRadioButton.checked = true;
    }

    // Move to the next row
    nextRow = nextRow.nextElementSibling;
  }
}

How This Works #

• clickedLink.closest('.category-row') grabs the exact category row that the clicked "NO" link belongs to—this ensures we start from the right place.
• The while loop iterates through each subsequent row:
  • If the row is not a category row, we look for the radio button with code="X" and check it.
  • As soon as we hit a row with the category-row class, the loop stops—so we never affect items in other categories.
• return false; in the link's onclick prevents the default link behavior (like navigating to a new page).

Edge Cases to Consider #

• If a category has no item rows below it, the loop will exit immediately—no errors thrown.
• If an item row doesn't have a radio button with code="X", the function just skips it (no issues).

内容的提问来源于stack exchange，提问作者user1855093