基于jQuery实现单选框匹配表格状态列的行显隐功能

你的代码存在几个关键问题，导致无法实现按状态筛选表格行的功能，下面是问题分析和修正方案：

原代码的问题 #

• 列索引错误：HTML里Status列是第6个表头（从0开始计数是索引5），但你用了eq(6)，指向了Admin列，根本没拿到状态值
• 状态值提取不准确：状态列的td里有多个空div，直接取整个td的文本会包含大量空白字符，无法和单选框值匹配
• 逻辑判断错误：latevalues是个布尔值（比较结果），你却拿它和字符串val做比较，逻辑完全错误
• 操作对象错误：你用$(this).parent().toggle()操作的是tbody，不是当前行tr
• 缺少事件监听：代码只执行一次，切换单选框时不会重新触发筛选逻辑

修正后的完整代码 #

HTML结构（无需修改） #

<div class="row">
    <div class="col-sm-2">                    
        <div class="radio">
            <label>
                <input type="radio" name="radio" class="radio" id="pending" value="LATE" checked="checked">
                Pending(Default)
            </label>
        </div>
        <div class="radio">
            <label>
                <input type="radio" name="radio" class="radio" id="approve" value="A">
                Approved
            </label>
        </div>
        <div class="radio">
            <label>
                <input type="radio" name="radio" class="radio" id="Rejected" value="R">
                Rejected
            </label>
        </div>                                         
    </div>                
</div>

<table class="table table-striped" style="width: 100%; table-layout: fixed;">
    <thead>
        <tr>
            <th>Number</th>
            <th>Comments</th>           
            <th>Submit</th>
            <th>Occassionent</th>
            <th>Review</th>
            <th>Status</th> <!-- 待匹配值的列 -->         
            <th>Admin</th>
            <th>By</th>
            <th>Date</th>
            <th>Managers Status</th>        
             
        </tr>
    </thead>
    <tbody> 
        <tr>
            <td>
                <a href="employees">
                    <span>49656</span>
                    <span> - </span>
                    <span> 24 May 2021</span>                           
                </a>
            </td>
            <td>                    
            </td>
            <td>
                <div> Due:</div>
                <div> 24 May 2021</div>
                <div> Act:</div>
                <div> <b class="danger">9 Apr 2023</b></div>
            </td>
            <td>
            </td>
            <td>
                <div> Due:</div>
                <div> 16 Apr 2023</div>
                <div> Act:</div>
                <div> <span>9 Apr 2023</span></div>
            </td>
            <td>
                <div>&nbsp;</div>
                <div>&nbsp;</div>
                <div><b class="success">LATE</b></div><!-- 状态列：匹配时显示该行 -->
            </td>
            <td>
                <div>
                    <dl>
                        <dd>Joe Anthony</dd>
                    </dl>
                </div>
            </td>
            <td style="width: 90px;">
            </td>
            <td style="width: 80px;">
            </td>
            <td style="width: 70px;">
            </td>
        </tr>
        <tr>
            <td>
                <a href="employees">
                    <span>49656</span>
                    <span> - </span>
                    <span> 24 May 2021</span>                           
                </a>
            </td>
            <td>                    
            </td>
            <td>
                <div> Due:</div>
                <div> 24 May 2021</div>
                <div> Act:</div>
                <div> <b class="danger">9 Apr 2023</b></div>
            </td>
            <td>
            </td>
            <td>
                <div> Due:</div>
                <div> 16 Apr 2023</div>
                <div> Act:</div>
                <div> <span>9 Apr 2023</span></div>
            </td>
            <td>
                <div>&nbsp;</div>
                <div>&nbsp;</div>
                <div><b class="success">A</b></div><!-- 状态列：匹配时显示该行 -->
            </td>
            <td>
                <div>
                    <dl>
                        <dd>Joe Anthony</dd>
                    </dl>
                </div>
            </td>
            <td style="width: 90px;">
            </td>
            <td style="width: 80px;">
            </td>
            <td style="width: 70px;">
            </td>
        </tr>
        <tr>
            <td>
                <a href="employees">
                    <span>49656</span>
                    <span> - </span>
                    <span> 24 May 2021</span>                           
                </a>
            </td>
            <td>                    
            </td>
            <td>
                <div> Due:</div>
                <div> 24 May 2021</div>
                <div> Act:</div>
                <div> <b class="danger">9 Apr 2023</b></div>
            </td>
            <td>
            </td>
            <td style="width: 90px;">
                <div> Due:</div>
                <div> 16 Apr 2023</div>
                <div> Act:</div>
                <div> <span>9 Apr 2023</span></div>
            </td>
            <td>
                <div>&nbsp;</div>
                <div>&nbsp;</div>
                <div><b class="success">R</b></div><!-- 状态列：匹配时显示该行 -->
            </td>
            <td>
                <div>
                    <dl>
                        <dd>Mark Anthony</dd>
                    </dl>
                </div>
            </td>
            <td style="width: 90px;">
            </td>
            <td style="width: 80px;">
            </td>
            <td style="width: 70px;">
            </td>
        </tr>
    </tbody>
</table>

修正后的jQuery代码 #

// 封装筛选逻辑为函数，方便重复调用
function filterTableRows() {
    var val = $(".radio:checked").val();
    $('.table tbody tr').each(function () {
        // 准确获取状态列的文本：找到Status列（索引5）里的b标签文本并去空格
        var statusText = $.trim($(this).find('td').eq(5).find('b').text());
        // 匹配则显示，不匹配则隐藏
        $(this).toggle(statusText === val);
    });
}

// 页面加载时执行一次初始筛选
$(document).ready(function() {
    filterTableRows();
    // 绑定单选框的change事件，切换时重新筛选
    $('.radio').on('change', filterTableRows);
});

修正说明 #

1. 修正列索引：把eq(6)改成eq(5)，对应正确的Status列
2. 精准提取状态值：通过find('b')直接拿到状态所在的b标签文本，避免多余空白字符干扰
3. 修复逻辑判断：直接用statusText === val的布尔结果控制行的显示/隐藏，使用toggle()方法更简洁
4. 添加事件监听：把筛选逻辑封装成函数，页面加载时执行一次，同时给所有单选框绑定change事件，切换时自动重新筛选
5. 操作正确对象：直接操作当前tr元素$(this)，而不是它的父元素tbody

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