Javascript table refresh no jquery

Question

Я занимаюсь 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); 

Answer 1

Если вы 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); 

Счастливый Coding ...