基于复选框状态隐藏表格TR，兼容AJAX动态加载场景

Got it, let's fix this issue step by step! The core problem here is that your existing logic only handles the DOM elements present on initial page load—once AJAX pulls in new rows, those fresh elements don't get the hide/show treatment based on your checkbox state. Plus, we'll polish up the localStorage handling to cover both hide and show scenarios.

1. 封装状态处理函数 #

First, let's wrap the hide/show logic into a reusable function. This way, we can call it whenever we need to apply the checkbox state—whether on page load, checkbox change, or after AJAX finishes loading new data.

2. 完善localStorage逻辑 #

We'll make sure the saved state correctly triggers both hiding and showing locked rows, not just the hiding part. Using getItem/setItem is also a cleaner way to interact with localStorage.

3. 绑定AJAX加载后的处理 #

No matter how you're fetching paginated data, you need to call our reusable function right after inserting the new rows into the DOM.

完整代码示例 #

HTML（给表格加个ID方便定位）

<input type="checkbox" id="product-toggle" style="border: 1px #000; background-color: #000;">
<table id="product-table">
    <tr>
        <td class="status-locked">text</td>
        <td>text</td>
        <td>text</td>
        <td class="status-locked">text</td>
    </tr>
</table>
<button class="pagination-btn" data-page="1">1</button>
<button class="pagination-btn" data-page="2">2</button>

jQuery代码

$(function() {
    // 封装处理锁定行的核心函数
    function updateLockedRowsVisibility() {
        const isToggleChecked = $('#product-toggle').prop('checked');
        const targetRows = $('#product-table tr:has(td.status-locked)');
        
        if (isToggleChecked) {
            targetRows.hide();
        } else {
            targetRows.show();
        }
    }

    // 读取并恢复本地存储的复选框状态
    const savedToggleState = localStorage.getItem('productToggleStatus') === 'true';
    $('#product-toggle')
        .prop('checked', savedToggleState)
        .on('change', function() {
            // 保存当前状态到localStorage
            localStorage.setItem('productToggleStatus', this.checked);
            // 状态变化时更新行的显示
            updateLockedRowsVisibility();
        });

    // 页面初始化时立即应用一次状态
    updateLockedRowsVisibility();

    // 处理分页按钮的AJAX请求（示例，根据你的实际接口调整）
    $('.pagination-btn').on('click', function() {
        const pageNum = $(this).data('page');
        
        $.ajax({
            url: '/your-data-endpoint', // 替换成你的实际数据接口地址
            data: { page: pageNum },
            success: function(fetchedData) {
                // 将新数据插入表格（这里假设返回的是完整的表格行HTML）
                $('#product-table').html(fetchedData);
                // 新数据加载完成后，立刻应用当前复选框状态
                updateLockedRowsVisibility();
            }
        });
    });
});

关键细节说明 #

• Reusable Function: updateLockedRowsVisibility() takes care of all rows (old and new) every time it's called, so we don't have to repeat logic.
• LocalStorage: Using proper getter/setter methods avoids odd edge cases with direct property assignment.
• AJAX Callback: Calling our function right after inserting new data ensures the fresh rows follow the current checkbox state immediately.

Now, whether you refresh the page, toggle the checkbox, or click a pagination button, rows containing status-locked cells will always respect the checkbox's state.

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