Google Channel API - Jquery 更新表答案

【问题标题】：Google Channel API - Jquery update tableGoogle Channel API - Jquery 更新表
【发布时间】：2015-06-23 13:02:11
【问题描述】：

由于必须使用谷歌频道 api 的限制，我正在尝试创建实时时间表。所以我可以很好地接收到我正在尝试添加或更新代码的所有工作的消息，但我的问题是使用 jquery 无法访问的添加元素的常见问题我知道这是因为 dom 的工作方式，但我正在寻找一种方法在这里将它四舍五入我当前的代码我知道它不起作用但我找到的所有答案都在谈论 aboit 按钮我没有使用按钮或单击它只是更新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);
 }

这是我的表格的 html，它非常简单，因为加载到表格中的所有内容都来自通道 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>

【问题讨论】：

标签： javascript jquery channel-api

【解决方案1】：

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

 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)

【讨论】：