Google 频道 API - Jquery 更新 table

Question

我正在尝试创建实时计时 table 由于限制，我必须使用 google 频道 api。所以我可以很好地收到消息，我正在尝试添加或更新代码，但我的问题是使用 jquery 无法访问添加元素的常见问题我知道这是因为 dom有效，但我正在寻找一种解决方法，我当前的代码我知道它不会工作，但我找到的所有答案都在谈论按钮我没有使用按钮或点击它只是更新 onMessage。我想要做的就是添加一行（如果不存在）并更新一行（如果存在）但问题是它都是实时的并且 dom 看不到它们，因为它们是在之后添加的。

您可以假定每个条目的名称都是唯一的，因此可以用作 ID。

if($('#tr_' + messageParsed.name).length)
{
    html = "<td>" + messageParsed.name + "</td><td>" + messageParsed.lap + "</td><td>" + messageParsed.pos + "</td><td>" + messageParsed.s1 + "</td><td>" + messageParsed.s2 + "</td><td>" + messageParsed.s3 + "</td>";
    console.log('Update');
    $('#tr_' + messageParsed.name).html(html);
}
else {
    html = "<tr id=\"tr_" + messageParsed.name + "\"><td>" + messageParsed.name + "</td><td>" + messageParsed.lap + "</td><td>" + messageParsed.pos + "</td><td>" + messageParsed.s1 + "</td><td>" + messageParsed.s2 + "</td><td>" + messageParsed.s3 + "</td></tr>";
    $("#times").append(html);
 }

这是我的 table 的 html 它非常简单，因为加载到 table 的所有内容都来自频道 api，有人肯定会问为此，我想我会直接添加它。

<table class="table table-striped">
    <thead>
       <tr>
            <th>Name</th>
            <th>Lap</th>
            <th>Position</th>
            <th>Sector 1</th>
            <th>Sector 2</th>
            <th>Sector 3</th>
        </tr>
    </thead>
    <tbody id="times">
    </tbody>
</table>

Answer 1

对于任何对我如何解决这个问题感兴趣的人，我想出了一种方法，使用 java 变量来检查它们是否存在，并每次都生成一个新的 table ，虽然效率不高，但它确实有效.

 if($.inArray(messageParsed.name, timing) !== -1)
        {
          var elmNum = $.inArray(messageParsed.name, timing);
          timingStore[elmNum] = messageParsed;
        }
        else {
          timing.push(messageParsed.name);
          timingStore.push(messageParsed);
        }
        // String Construction
        var htmlString;
        console.log(timingStore)
        for(var i = 0; i < timingStore.length; i++)
        {
          htmlString += "<tr><td>" + timingStore[i].name + "</td><td>" + timingStore[i].lap + "</td><td>" + timingStore[i].pos + "</td><td>" + timingStore[i].s1 + "</td><td>" + timingStore[i].s2 + "</td><td>" + timingStore[i].s3 + "</td></tr>";
        }
        $('#times').html(htmlString)

Google 频道 API - Jquery 更新 table

Google Channel API - Jquery update table

javascript

jquery

channel-api