页面刷新后为HTML表格行恢复.selected类样式的实现方案

我已经通过sessionStorage.setItem(rowId, 'true')存储了表格选中行的rowId，希望页面刷新后，能给对应rowId的表格行重新添加.selected类，以此保持选中行的高亮状态。目前尝试通过判断localStorage.getItem('1') === 'true'这类逻辑实现，但还没完成。

现有相关代码 #

存储行ID的代码 #

sessionStorage.setItem(rowId, 'true');

尝试恢复类的逻辑（未完成） #

if (localStorage.getItem('1') === 'true' || localStorage.getItem('2') === 'true') {
                                             
}

.selected类CSS样式 #

.selected {
        box-shadow: inset 0px 0px 10px #FF0000;
        border: 2px solid rgba(255,255,255,.5);
}

点击高亮行的JavaScript函数 #

highlight_row();
function highlight_row() {

    var table = document.getElementById('display-table');
    var cells = table.getElementsByTagName('td');

    for (var i = 0; i < cells.length; i++) {
        // 获取每个单元格
        var cell = cells[i];
        // 给单元格绑定点击事件
        cell.onclick = function () {
            // 获取单元格所在行的索引
            var rowId = this.parentNode.rowIndex;
            var rowsNotSelected = table.getElementsByTagName('tr');
            // 清除所有行的高亮状态
            for (var row = 0; row < rowsNotSelected.length; row++) {
                rowsNotSelected[row].style.backgroundColor = "";
                rowsNotSelected[row].classList.remove('selected');
            }
            // 给当前点击的行添加高亮
            var rowSelected = table.getElementsByTagName('tr')[rowId];
            rowSelected.style.backgroundColor = "yellow";
            rowSelected.className += " selected";
    
            sessionStorage.setItem(rowId, 'true');
            //alert(rowId);   
            
        }
    }

}

解决方案 #

核心问题修正 #

你当前代码里的关键错误是：存储用的是sessionStorage，但恢复逻辑却在读取localStorage，这两个是完全独立的存储对象，必须统一使用其中一个。

完整实现代码 #

1. 页面加载时恢复高亮状态

在页面加载完成后，遍历表格行，匹配sessionStorage中存储的选中行标识，恢复高亮：

// 页面加载完成后执行
window.onload = function() {
    var table = document.getElementById('display-table');
    var rows = table.getElementsByTagName('tr');
    
    // 遍历所有表格行
    for (var i = 0; i < rows.length; i++) {
        var rowId = i.toString(); // sessionStorage的键值都是字符串，统一转格式
        if (sessionStorage.getItem(rowId) === 'true') {
            // 先清除所有行的高亮
            for (var j = 0; j < rows.length; j++) {
                rows[j].style.backgroundColor = "";
                rows[j].classList.remove('selected');
            }
            // 给目标行添加高亮样式
            rows[i].style.backgroundColor = "yellow";
            rows[i].classList.add('selected');
            break; // 若只允许单选，找到后直接跳出循环
        }
    }
};

2. 优化点击事件逻辑

在点击行时，先清除之前存储的选中记录，避免残留，同时用更规范的方式操作类名：

function highlight_row() {
    var table = document.getElementById('display-table');
    var cells = table.getElementsByTagName('td');

    for (var i = 0; i < cells.length; i++) {
        var cell = cells[i];
        cell.onclick = function () {
            var rowId = this.parentNode.rowIndex.toString();
            var rows = table.getElementsByTagName('tr');
            
            // 清除所有行的高亮及存储记录
            for (var row = 0; row < rows.length; row++) {
                rows[row].style.backgroundColor = "";
                rows[row].classList.remove('selected');
                sessionStorage.removeItem(row.toString());
            }
            
            // 高亮当前选中行
            var rowSelected = rows[this.parentNode.rowIndex];
            rowSelected.style.backgroundColor = "yellow";
            rowSelected.classList.add('selected');
            
            sessionStorage.setItem(rowId, 'true');
        }
    }
}

highlight_row();

注意事项 #

• 若需要跨会话保留选中状态，可将sessionStorage替换为localStorage，后者数据会永久保存（除非手动清除）。
• 使用classList.add()/classList.remove()操作类名，比直接拼接className更安全，避免重复添加类名。
• rowIndex从0开始计数，如果表格包含表头行，需要根据实际结构调整行索引的判断逻辑。

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