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

如果您在开发模式下检查您的页面(按 F12)，您会看到没有添加新表，实际上您在做什么您首先得到 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);

快乐编码...