JavaScript新手求助：如何将有序列表替换为指定结构的表格？

嘿，作为JavaScript新手，这个需求其实很好上手，我来带你一步步完成～

实现思路 #

我们需要完成两个核心操作：

• 读取原有序列表里的所有列表项内容
• 创建符合要求的2列3行表格，把列表内容填充进去，再替换掉原来的有序列表

完整代码示例 #

<html>
<head>
    <style>
        table, td {
            border: 1px solid black;
            border-collapse: collapse; /* 加上这个让边框不会重复 */
            padding: 8px; /* 加点内边距更美观 */
        }
    </style>
</head>
<body>
    <p>游戏列表：</p>
    <!-- 原有序列表，给它加个id方便获取 -->
    <ol id="gameList">
        <li>塞尔达传说：王国之泪</li>
        <li>星穹铁道</li>
        <li>原神</li>
    </ol>

    <script>
        // 1. 获取有序列表里的所有列表项
        const listItems = document.querySelectorAll('#gameList li');
        
        // 2. 创建表格元素
        const table = document.createElement('table');
        
        // 3. 遍历列表项，生成表格的每一行
        listItems.forEach((item, index) => {
            // 创建行
            const row = document.createElement('tr');
            
            // 创建第一列（数字1、2、3）
            const numberCell = document.createElement('td');
            numberCell.textContent = index + 1; // 索引从0开始，加1得到1、2、3
            row.appendChild(numberCell);
            
            // 创建第二列（游戏名称）
            const nameCell = document.createElement('td');
            nameCell.textContent = item.textContent; // 读取列表项的文本内容
            row.appendChild(nameCell);
            
            // 把行添加到表格里
            table.appendChild(row);
        });
        
        // 4. 用表格替换原来的有序列表
        document.getElementById('gameList').replaceWith(table);
    </script>
</body>
</html>

代码解释 #

• 获取列表项：用document.querySelectorAll('#gameList li')选中目标有序列表下的所有<li>元素，这样就能拿到所有游戏名称。
• 创建表格：通过document.createElement('table')生成空表格，后续再往里添加行和单元格。
• 生成表格行：用forEach遍历列表项，每一项对应表格的一行：
  • 第一列的数字是index + 1，因为数组索引从0开始，加1后正好是1、2、3。
  • 第二列直接读取列表项的文本内容item.textContent。
• 替换元素：用replaceWith方法把原来的有序列表换成我们刚创建好的表格，一步完成替换。

注意事项 #

• 确保原有序列表有唯一的id（比如示例里的gameList），这样能精准定位到要替换的元素。
• 如果列表项数量不是3个，代码也能自动适配生成对应行数的表格，很灵活～

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