如何只显示一次动态创建的html表？

Question

每次我输入另一个足球比分时，都会更新并显示联赛表，但会将其附加到表列表中。如何仅显示最新表格？

以下是html的摘录：

008312100001200|:6081_1

以下是显示用于输入分数的装置的javascript：

008312100001200

这是在输入最新分数后显示表格的代码：

<div>
<table id="matches" border="1"> </table>
</div>
<div>
<table id="standings" border="1"> </table>
</div>
<input type="button" value="Update" onclick="update()" />

输入三个分数后，将显示：

我尝试清除javascript中的联赛数组，但结果仍然相同。如何仅显示表格的最高版本？谢谢

Answer 1

再次感谢您的评论和进一步的谷歌搜索，以下内容将在更新表之前删除该表，除非有更好的方法？

for(var i = standings.rows.length - 1; i >= 0; i--)
{
    standings.deleteRow(i);
}

为大家加油！ ：）

Answer 2

对于表更新/问题，请重点关注updateRow函数。该行实际更新第rownum行（<td>）i

列的内容

rows[rownum].getElementsByTagName('td')[i].innerHTML = coldata[i];

这里不仅有更新表行的功能，而且您还可以在我的以空格分隔的对象中查看功能updateRow。 updateRow在需要时调用createRow（该索引处的行不存在），这里没有花哨的地方，然后更新新行。

我在命名空间中也使用了我创建的matches中的匹配对象数组（不是问题中的一个，所以我作了假设）

matches: [{
  match: 1,
  score: [{
    team: "Ap",
    score: 3
  }, {
    team: "Or",
    score: 2
  }]
}],

请注意，我在哪里调用此代码来更新ID为standings的表中standings-table的表。我不知道这些是什么，所以我只是在数组中插入一些东西，然后使用

更新表

for (let i = 0; i < myLeague.standings.length; i++) {
    myLeague.updateRow('standings-table', myLeague.standings[i], i);
}

其他事项：我创建表单的目的只是为了展示如何在插入新匹配项时更新表，触发事件，它会执行更新或插入行所需的操作-但这实际上只是为了测试创建新的匹配项时进行更新。

• 表中的行是完全根据matches内容的数组来更新或插入的。
• 没有什么可以处理表或数组中的删除操作，因为这只是有关插入和更新的操作
• 如果匹配索引的行索引不存在，则会创建新行并进行更新

var myLeague = myLeague || {
  teamSelect1: "team1",
  teamSelect2: "team2",
  matchesPlayed: 1,
  teams: [{
      name: "Apples",
      abbreviation: "Ap"
    },
    {
      name: "Oranges",
      abbreviation: "Or"
    },
    {
      name: "Pears",
      abbreviation: "Pe"
    }
  ],
  matches: [{
    match: 1,
    score: [{
      team: "Ap",
      score: 3
    }, {
      team: "Or",
      score: 2
    }]
  }],
  standings: [
    ["A", 2, 1, 1, 3, 2, 3, 0],
    ["B", 3, 1, 1, 3, 2, 3, 6]
  ],
  cloneRow: function(tableid, objectRef) {
    // find table to clone/append to
    let table = document.getElementById(tableid);
    // find row to clone, I use first one
    let firstRow = mytable.rows[0];
    // let row = document.getElementById("rowToClone");
    let clone = firstRow.cloneNode(true); // copy children too
    clone.id = ""; // change id or other attributes/contents
    table.appendChild(clone); // add new row to end of table
  },
  createRow: function(tableid, colCount, rowCount = 1, defaultContent = "") {
    let row = document.createElement('tr'); // create row node
    for (let i = 0; i < colCount; i++) {
      let newText = document.createTextNode(defaultContent);
      let col = row.insertCell(i);
      col.appendChild(newText);
    }
    let table = document.getElementById(tableid); // find table to append to
    let tbody = table.getElementsByTagName('tbody')[0];
    for (let r = 1; r <= rowCount; r++) {
      tbody.appendChild(row); // append row to table
    }
  },

  updateRow: function(tableid, coldata = ['$nbsp;'], rownum = 0) {
    let table = document.getElementById(tableid); // find table to update to
    let tbody = table.getElementsByTagName('tbody')[0];
    let rows = tbody.rows; // get rows node
    let maxRows = 20; //keep it from going crazy adding rows
    while (rows.length < maxRows && !rows[rownum]) {
      this.createRow(tableid, coldata.length, 1, "x");
    }
    //myLeague.updateRow(tableid,coldata, rownum);
    for (let i = 0; i < coldata.length; i++) {
      rows[rownum].getElementsByTagName('td')[i].innerHTML = coldata[i];
    }
  },
  addTeam: function(team, teamid) {
    var sel = document.getElementById(teamid);
    var optNew = document.createElement("option");
    optNew.value = team.abbreviation;
    optNew.text = team.name;
    sel.add(optNew, null);
  },
  addTeamsToSelect: function() {
    myLeague.teams.forEach(function(team) {
      myLeague.addTeam(team, this.teamSelect1);
      myLeague.addTeam(team, this.teamSelect2);
    }, this);
  },
  listMatches: function(event) {
    // event.target is the div
    let src = event.target.dataset.source;
    console.log("src:", src);
    document.getElementById("matchplayed").textContent = event.matches;
    this[src].forEach(function(item, index, array) {
      document.getElementById('matchplayed').textContent = array.length;
      let rowdata = [item.score[0].team, item.score[0].score, item.score[1].team, item.score[1].score];
      this.updateRow(src, rowdata, index);
    }, this);
  },

  clickAddListener: function(event) {
    // 'this' is bound to the namespace object
    // console.log(event.target); // the button
    // console.log(this.matchesPlayed);//namespace
    if (!document.getElementById(this.teamSelect1).value || !document.getElementById(this.teamSelect2).value) {
      let errorEl = document.getElementById("form1")
        .getElementsByClassName("error-text")[0];
      errorEl.textContent = "Both teams need to be selected.";
      errorEl.style.visibility = 'visible';
      errorEl.style.opacity = '1';
      setTimeout(function() {
        errorEl.style.WebkitTransition = 'visibility .5s, opacity .5s';
        errorEl.style.opacity = '0';
        errorEl.style.visibility = 'hidden';
        errorEl.textContent = "";
      }, 5000);
    } else {
      this.matchesPlayed++;
      let r = {
        match: this.matchesPlayed,
        score: [{
          team: document.getElementById(this.teamSelect1).value,
          score: document.getElementById("score1").value
        }, {
          team: document.getElementById(this.teamSelect2).value,
          score: document.getElementById("score2").value
        }]
      };
      this.matches.push(r);
    }
    document.getElementById('matches').dispatchEvent(this.showmatchesevent);
  },
  addListeners: function() {
    let scope = this;

    document.getElementById(this.teamSelect1)
      .addEventListener('change', function() {
        let s = document.getElementById(scope.teamSelect2);
        let oval = s.value;
        if (this.value == oval) {
          s.value = '';
        }
      }, this);

    document.getElementById(this.teamSelect2)
      .addEventListener('change', function() {
        let s = document.getElementById(scope.teamSelect1);
        let oval = s.value;
        if (this.value == oval) {
          s.value = '';
        }
      }, this);

    document.getElementById('add-match')
      // bind this namespace to the event listener function
      .addEventListener('click', (this.clickAddListener).bind(this), false);

    this.showmatchesevent = new CustomEvent('showmatches');
    document.getElementById('matches')
      .addEventListener('showmatches', this.listMatches.bind(this), false);
  }
};
window.onload = function() {
  myLeague.addTeamsToSelect();
  myLeague.addListeners();
  for (let i = 0; i < myLeague.standings.length; i++) {
    myLeague.updateRow('standings-table', myLeague.standings[i], i);
  }
  // set table from defaults/imported list
  document.getElementById('matches').dispatchEvent(myLeague.showmatchesevent);
};

/* typography */

html {
  font-family: 'helvetica neue', helvetica, arial, sans-serif;
}

th {
  letter-spacing: 2px;
}

td {
  letter-spacing: 1px;
}

tbody td {
  text-align: center;
}

.match-inputs {
  border: solid 2px #DDDDDD;
  padding;
  1em;
  margin: 1em;
}

.error-text {
  height: 1em;
  color: red;
}

.matches-played {
  padding: 13m;
}


/* table layout */

table {
  border-collapse: collapse;
  border: 1px solid black;
}

.score th,
td {
  padding: 0.2em;
  border: solid #DDDDDD 1px;
}

.container {
  padding: 1em;
}

<div class="container match-inputs">
  <form id="form1">
    <div>Add Matches</div>
    <div class="input-group"><label>Choose L Team:</label>
      <select id="team1">
        <option value="">Choose</option>
      </select>
    </div>
    <div class="input-group"><label>Choose L2 Team:</label>
      <select id="team2">
        <option value="">Choose</option>
      </select>
    </div>
    <div class="input-group score-group"><label>Team1 score:</label>
      <input id="score1" type="number" class="score-input" value="0" min="0" max="99" value="0" />
    </div>
    <div class="input-group score-group"><label>Team2 score:</label>
      <input id="score2" type="number" class="score-input" value="0" min="0" max="99" value="0" />
    </div>
    <div class="input-group"><label>Add this match to the list.</label>
      <button type="button" id="add-match">Add Match</button>
    </div>
    <div class="error-text">&nbsp;</div>
  </form>
</div>
<div class="container">
  <div class="matches-played">Matches Played:<span id="matchplayed"></span></div>
  <table id="matches" data-source="matches">
    <thead>
      <tr>
        <th colspan="4">Matches</th>
      </tr>
      <tr>
        <th>L</th>
        <th>S</th>
        <th>S2</th>
        <th>L1</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>
<div class="container">
  <table id="standings-table">
    <thead>
      <tr>
        <th colspan="8">Standings</th>
      </tr>
      <tr>
        <th>Team</th>
        <th>P</th>
        <th>W</th>
        <th>D</th>
        <th>L</th>
        <th>F</th>
        <th>A</th>
        <th>Pts</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>