如何用JavaScript从指定HTTP站点获取数据生成带结果对勾的实时HTML表格

嘿，我看你在处理这个动态表格的问题上卡壳了，刚好你只能加script标签，那咱们直接用jQuery来搞定，我给你一套完整的解决方案，顺便把你遇到的几个坑都填上：

完整实现代码 #

$(document).ready(function() {
    // 定义更新表格的核心函数
    function refreshTipsetTable() {
        // 发起请求获取数据
        $.get('https://stryk.herokuapp.com/tipset', function(gameList) {
            // 找到目标表格（记得把#tipset-table改成你实际的表格ID）
            const targetTable = $('#tipset-table');
            // 清空表格主体，保留表头（如果有表头的话）
            targetTable.find('tbody').empty();

            // 遍历每一条赛事数据
            gameList.forEach(game => {
                // 根据结果生成对应列的对勾
                const check1 = game.result === '1' ? '<span class="checkmark"><div class="stem"></div><div class="kick"></div></span>' : '';
                const checkX = game.result === 'X' ? '<span class="checkmark"><div class="stem"></div><div class="kick"></div></span>' : '';
                const check2 = game.result === '2' ? '<span class="checkmark"><div class="stem"></div><div class="kick"></div></span>' : '';

                // 构建表格行
                const tableRow = $('<tr>')
                    .append($('<td>').text(game.gameNumber))
                    .append($('<td>').text(game.teams)) // 如果teams是数组，改成game.teams.join(' vs ')
                    .append($('<td>').html(check1))
                    .append($('<td>').html(checkX))
                    .append($('<td>').html(check2));

                // 把行添加到表格里
                targetTable.find('tbody').append(tableRow);
            });
        })
        .fail(function() {
            console.error('哎呀，获取赛事数据失败了，检查下接口或者网络状态吧！');
        });
    }

    // 页面加载完成后先更新一次表格
    refreshTipsetTable();

    // 设置定时刷新，这里是5分钟刷新一次（300000毫秒），你可以按需调整
    setInterval(refreshTipsetTable, 300000);
});

关键问题的解决说明 #

1. 为什么alert显示[object Object]？
   你直接alert对象/数组的时候，浏览器只会显示它的类型，想看具体结构的话，换成console.log(gameList)，打开浏览器控制台就能看到每一条数据的字段细节，确保代码里的gameNumber、teams、result和接口返回的字段名一致哦。

2. 怎么插入绿色对勾？
   我直接把你提供的对勾HTML字符串放进对应的单元格里，用html()方法而不是text()，这样浏览器才会解析成对应的样式元素，而不是纯文本。

3. 怎么实现实时刷新？
   用setInterval定时调用刷新函数，我设置的是5分钟一次，你可以根据需求改时间（比如1分钟就是60000毫秒），每次刷新前先清空表格主体，避免数据重复叠加。

4. 小细节提醒

   • 记得把代码里的#tipset-table改成你页面中实际的表格ID；
   • 如果接口返回的teams是数组（比如['曼联', '利物浦']），把game.teams改成game.teams.join(' vs ')就能显示成“曼联 vs 利物浦”；
   • 如果遇到跨域报错，检查下接口是否允许跨域访问，一般heroku部署的接口默认会处理CORS，但如果有问题得找接口方调整。

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