Javascript表刷新没有jquery答案

【问题标题】：Javascript table refresh no jqueryJavascript表刷新没有jquery
【发布时间】：2016-12-30 01:13:17
【问题描述】：

我正在做没有 jquery 实现的 javascript。目前我正在填充一个表，并希望在添加新数据而不重新加载新页面时刷新它。截至目前，令人耳目一新的作品，但它不断创建新表。如何在不不断添加新表的情况下实现表本身的刷新？

代码

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

【问题讨论】：

您想要来自服务器的新数据/记录？
如果您不想要新行，为什么还要在函数中添加它们？
到目前为止我已经从服务器传递了 json，var 时间表是我的 json 的示例
您也可以采取解决方法，例如在添加新行之前先清除表格，例如table.innerHTML="";
@HankyPanky 我的错误我的意思是当刷新刷新时，它会在另一个表下创建一个新表，

标签： javascript html html-table

【解决方案1】：

如果您inspect 您的页面处于开发模式（按 F12），那么您可以看到 no new table 正在添加，实际上您所做的是首先获得 table，然后您是开始向其中添加新行，但该表也有旧行。所以这就是为什么你会多次看到相同的行。要克服这个问题，首先你必须清理桌子。

您也每次都获得表格，但没有必要这样做，这样做您很容易增加浏览器的负载，因为JavaScript 每次都会遍历您每个DOM 以找到您的@ 987654326@.

只需进行以下更改即可解决此问题。

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

快乐编码...

【讨论】：