如何将JavaScript对象在HTML页面渲染为带可点击链接的三列表格

你可以直接用下方的完整代码替换原有index.html的全部内容，无需引入额外第三方依赖，开箱即可实现你需要的三列可点击链接表格效果：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>合约链接表格</title>
    <style>
        /* 表格基础美化样式，不需要可以直接删除整段style */
        table {
            border-collapse: collapse;
            width: 100%;
            margin: 20px 0;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        a {
            color: #2196F3;
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <table id="dataTable">
        <thead>
            <tr>
                <th>合约代码</th>
                <th>TradingView 链接</th>
                <th>Kite 链接</th>
            </tr>
        </thead>
        <tbody id="tableBody">
            <!-- 动态数据会自动插入到此处 -->
        </tbody>
    </table>

    <script>
        var eventSource = new EventSource("/listen")
        const tableBody = document.getElementById('tableBody')
        
        eventSource.addEventListener("message", function(e) {
            console.log(e.data)
        }, false)

        eventSource.addEventListener("online", function(e) {
            let data = JSON.parse(e.data)
            // 清空旧的表格数据
            tableBody.innerHTML = ''
            // 遍历所有合约数据生成表格行
            Object.entries(data).forEach(([contractKey, urls]) => {
                const row = document.createElement('tr')
                // 第一列：合约key值
                const keyCell = document.createElement('td')
                keyCell.textContent = contractKey
                row.appendChild(keyCell)
                // 第二列：第一个可点击链接
                const link1Cell = document.createElement('td')
                const link1 = document.createElement('a')
                link1.href = urls[0]
                link1.textContent = '查看TradingView行情'
                link1.target = '_blank'
                link1.rel = 'noopener noreferrer'
                link1Cell.appendChild(link1)
                row.appendChild(link1Cell)
                // 第三列：第二个可点击链接
                const link2Cell = document.createElement('td')
                const link2 = document.createElement('a')
                link2.href = urls[1]
                link2.textContent = '查看Kite行情'
                link2.target = '_blank'
                link2.rel = 'noopener noreferrer'
                link2Cell.appendChild(link2)
                row.appendChild(link2Cell)
                // 将生成的行插入表格
                tableBody.appendChild(row)
            })
        }, true)
    </script>
</body>
</html>

功能说明 #

• 每次接收到服务端推送的online事件时，表格会自动刷新为最新的数据
• 所有链接点击后会在新标签页打开，不会覆盖当前的推送页面
• 如果你需要修改链接的显示文本，直接修改代码中link1.textContent和link2.textContent的赋值内容即可

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