2015-06-23 40 views
0

我試圖創建一個活的時間表,由於我必須使用谷歌頻道API的限制。所以我可以收到很好的消息,我試圖添加或更新代碼的所有工作,但我的問題是常見的添加元素不可訪問使用jquery我知道這是因爲dom的工作方式,但我正在尋找一種方式圓它在這裏它我現在的代碼我知道它不會工作,但所有的答案我覺得談論aboit按鈕我沒有使用按鈕或點擊它只是更新onMessage。我所要做的就是在不存在的情況下添加一行,如果它存在,則更新行,但問題在於它全部是實時的,並且dom因爲之後添加而沒有看到它們。谷歌渠道API - jquery更新表

您可以確定名稱對於每個條目都是唯一的,因此它可以用作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超級簡單,有人爲註定要問它,所以我想我會添加它straigt了。

<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> 

回答

0

對於任何人有興趣我是如何解決這個我摸索出用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)