如何用JavaScript实现表格未读行文本加粗、已读后取消加粗

安全阿岳

2026-7-22

实现表格行未读/已读状态切换（类似Gmail效果）

核心思路

用CSS类标记未读行，设置文本加粗样式
点击行时切换类，同时可选择同步后端状态实现持久化已读状态

步骤1：修改表格行的HTML/PHP代码

给未读的<tr>添加unread类（根据后端的未读状态字段判断，比如$veri['is_unread']）：

<tr class="<?= $veri['is_unread'] ? 'unread' : '' ?>">
    <td>
        <a href="/webmcr/birthverifyview/<?=$veri['rreg_transactcode']?>" class="stretched-link" style="text-decoration: none; color: black;">
            <?= $veri['rreg_transactcode'] ?>
        </a>
    </td>
    <td><?= $veri['rb_fname'] ?> <?= $veri['rb_mname'] ?> <?= $veri['rb_lname'] ?></td>
    <td><?= $veri['rb_createdat'] ?></td>
</tr>

步骤2：添加CSS样式

定义未读行的加粗样式：

/* 未读行文本加粗 */
tr.unread td {
    font-weight: bold;
}

步骤3：添加JavaScript处理点击切换

给表格行绑定点击事件，切换unread类，同时可选向后端发送请求标记为已读：

// 获取所有表格行
const tableRows = document.querySelectorAll('tr');

tableRows.forEach(row => {
    row.addEventListener('click', function() {
        // 切换未读类
        this.classList.toggle('unread');
        
        // 可选：向后端发送请求，标记该记录为已读（持久化状态）
        const transactCode = this.querySelector('a').getAttribute('href').split('/').pop();
        fetch(`/webmcr/markasread/${transactCode}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                // 如果有CSRF令牌，需添加对应请求头
                // 'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
            }
        });
    });
});