javascriptテーブルリフレッシュなしjquery

Question

jqueryの実装なしでjavascriptをやっています。 現在、テーブルを作成していて、新しいページを再読み込みせずに新しいデータが追加されたときにそのテーブルを更新したいと考えています。現時点では、爽やかな作品が動作しますが、新しいテーブルを作成し続けます。新しいテーブルを追加し続けることなく、テーブル自体をリフレッシュする方法を教えてください。

Fiddle

コード

var schedule = [ 
{ date: "Monday, 9:00am", team1: "Chasing", team1Score: "13", team2: "Amsterdam Money Gang", team2Score: "9"}, 
{ date: "Monday, 9:00am", team1: "Boomsquad", team1Score: "15", team2: "Beast Amsterdam", team2Score: "11"}, 
]; 

function run(){  
var len = schedule.length; 
var table = document.getElementById('table1'); 

for (var i=0; i < len; i++) { 
    var tr = document.createElement('tr'); 
    var s = schedule[i]; 

    var td = document.createElement('td'); 
    td.innerHTML = s.date; 
    tr.appendChild(td); 

    td = document.createElement('td'); 
    td.innerHTML = s.team1; 
    tr.appendChild(td); 

    td = document.createElement('td'); 
    td.innerHTML = s.team1Score; 
    tr.appendChild(td); 

    td = document.createElement('td'); 
    td.innerHTML = s.team2; 
    tr.appendChild(td); 

    td = document.createElement('td'); 
    td.innerHTML = s.team2Score; 
    tr.appendChild(td); 

    table.appendChild(tr); 
}} 

setInterval(function(){ 
    run() // this will run after every 5 seconds 
}, 2000); 

Answer 1

あなたの場合inspectページ（F12を押して）開発モードでは、no new tableがあることがわかりますよりも、あなたは何をしている実際に、追加されます最初にtableを取得してから、それに新しい行を追加し始めていますが、テーブルにも古い行があります。そのため、同じ行が何度も表示されています。最初にこの問題を解決するには、テーブルをクリアする必要があります。

また、テーブルを毎回取得しているが、その必要はJavaScriptたびにあなたのIDを見つけるために、あなたに一人ひとりDOMを横断するので、ブラウザ上の負荷の単純な増加であることを実行して、ありません。

この問題を解決するために以下の変更を行いました。

var table = document.getElementById('table1'); 

var schedule = [ 
{ date: "Monday, 9:00am", team1: "Chasing", team1Score: "13", team2: "Amsterdam Money Gang", team2Score: "9"}, 
{ date: "Monday, 9:00am", team1: "Boomsquad", team1Score: "15", team2: "Beast Amsterdam", team2Score: "11"}, 
]; 

function run(){  
var len = schedule.length; 
table.innerHTML=""; 

for (var i=0; i < len; i++) { 
    var tr = document.createElement('tr'); 
    var s = schedule[i]; 

    var td = document.createElement('td'); 
    td.innerHTML = s.date; 
    tr.appendChild(td); 

    td = document.createElement('td'); 
    td.innerHTML = s.team1; 
    tr.appendChild(td); 

    td = document.createElement('td'); 
    td.innerHTML = s.team1Score; 
    tr.appendChild(td); 

    td = document.createElement('td'); 
    td.innerHTML = s.team2; 
    tr.appendChild(td); 

    td = document.createElement('td'); 
    td.innerHTML = s.team2Score; 
    tr.appendChild(td); 

    table.appendChild(tr); 
}} 

setInterval(function(){ 
    run() // this will run after every 5 seconds 
}, 2000); 

コーディングハッピー...