Javascript表刷新沒有jquery

我在做沒有jQuery實現的JavaScript。目前我正在填充一張表，並希望在添加新數據時刷新它，而不重新加載新頁面。截至目前刷新工作，但它不斷創建新的表。我如何實現桌面本身的刷新，而不需要添加新的表格？Javascript表刷新沒有jquery

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

來源

2016-06-23 newbieprogrammer

你想從服務器新的數據/記錄？ –

如果你不想要新行，你爲什麼要在你的函數中添加它們呢？ –

截至目前我已經從JSON服務器過去了，VAR時間表添加像'table.innerHTML =「」新行之前，我的JSON – newbieprogrammer

如果inspect您的網頁開發模式（按F12）比你可以看到有no new table被加入，其實你在做什麼是你第一次得到table之後，你開始向它添加新的行，但表中也有舊的行。所以這就是爲什麼你多次看到相同的行。首先要解決這個問題，必須清除表格。

你也得到了表每次但沒有必要的是，通過這樣做，你是簡單的增加瀏覽器上的負載，因爲JavaScript每次穿越到你每一個DOM找到你ID。

簡單地作出了以下修改來克服這個問題。

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

編碼快樂......

來源

2016-06-23 08:06:45

Javascript表刷新沒有jquery

回答

相關問題