如何在页面刷新时随机打乱HTML表格指定列的td内容？

实现思路 #

• 页面加载完成后，遍历每个题目行，提取A、B、C列的选项元素
• 用Fisher-Yates洗牌算法打乱选项顺序，保证随机公平性
• 将打乱后的选项重新填充到对应列，保留原有的点击选中事件
• 优化原选中切换函数，避免全局变量依赖，兼容现代浏览器事件处理逻辑

完整代码 #

<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            font-family: arial, sans-serif;
            border-collapse: collapse;
            width: 100%;
        }

        td, th {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }

        tr:nth-child(even) {
            background-color: #dddddd;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>Question</th>
            <th>A</th>
            <th>B</th>
            <th>C</th>
        </tr>
        <tr>
            <td>TESTING FIRST QUESTION</td>
            <td onclick="togCell(event, '#90ee90','AnsSelected_1')">FIRST Choices Correct</td>
            <td onclick="togCell(event, '#90ee90','AnsSelected_1')">FIRST Choices Wrong</td>
            <td onclick="togCell(event, '#90ee90','AnsSelected_1')">FIRST FIRST Choices Wrong</td>
        </tr>
        <tr>
            <td>TESTING SECOND QUESTION</td>
            <td onclick="togCell(event, '#90ee90','AnsSelected_1')">SECOND Choices Wrong</td>
            <td onclick="togCell(event, '#90ee90','AnsSelected_1')">SECOND Choices Wrong</td>
            <td onclick="togCell(event, '#90ee90','AnsSelected_1')">SECOND Choices Correct</td>
        </tr>
    </table>

    <script>
        // 洗牌算法：打乱数组顺序
        function shuffleArray(array) {
            for (let i = array.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [array[i], array[j]] = [array[j], array[i]];
            }
            return array;
        }

        // 页面加载完成后执行选项打乱操作
        document.addEventListener('DOMContentLoaded', function() {
            // 获取所有题目行（排除表头行）
            const questionRows = document.querySelectorAll('table tr:not(:first-child)');
            
            questionRows.forEach(row => {
                // 提取当前行的A、B、C列td元素（索引1、2、3）
                const optionCells = Array.from(row.querySelectorAll('td')).slice(1, 4);
                // 保存每个选项的内容和点击事件属性
                const options = optionCells.map(cell => ({
                    content: cell.innerHTML,
                    onClick: cell.getAttribute('onclick')
                }));
                // 打乱选项顺序
                const shuffledOptions = shuffleArray(options);
                // 将打乱后的选项放回对应td
                optionCells.forEach((cell, index) => {
                    cell.innerHTML = shuffledOptions[index].content;
                    cell.setAttribute('onclick', shuffledOptions[index].onClick);
                });
            });
        });

        // 优化后的选中样式切换函数
        function togCell(event, col, asn) {
            const el = event.target;
            // 清除当前行所有选项的背景色
            el.parentNode.querySelectorAll('td').forEach(cell => {
                cell.style.backgroundColor = '';
            });
            // 设置当前选中项的背景色
            el.style.backgroundColor = col;
        }
    </script>
</body>
</html>

关键细节说明 #

1. 洗牌算法：Fisher-Yates算法是业内常用的公平洗牌方式，避免了简单随机排序可能出现的概率不均问题
2. DOM加载时机：通过DOMContentLoaded事件确保DOM完全渲染后再执行打乱操作，避免找不到元素的报错
3. 事件保留：提取并还原每个选项的onclick属性，保证打乱后仍能正常触发选中样式切换
4. 函数优化：不再依赖全局event变量，直接使用传入的事件参数，提升代码兼容性和可维护性

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