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

Question

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

这是html的摘录：

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

这是显示输入分数的装置的javascript：

// Display fixtures to input the scores

window.onload = function()
{
table = document.getElementById("matches");

var row;
var cell1;
var cell2;
var cell3;

  for (i = 1; i < Results.length; i++)
  {

    row = table.insertRow(i-1); //table starts row 0 but Results row 1 so i-1 used
    cell1 = row.insertCell(0);
    cell2 = row.insertCell(1);
    cell3 = row.insertCell(2);
    cell4 = row.insertCell(3);
    cell1.innerHTML = Results[i][0];
    cell2.innerHTML = '<input type="number" min="0" max="99"/>'
    cell3.innerHTML = '<input type="number" min="0" max="99"/>'
    cell4.innerHTML = Results[i][3];
  }
}

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

// Display League Table

standings = document.getElementById("standings");


for (i = 0; i < League.length; i++)
{

    row = standings.insertRow(i);
    cell1 = row.insertCell(0);
    cell2 = row.insertCell(1);
    cell3 = row.insertCell(2);
    cell4 = row.insertCell(3);
    cell5 = row.insertCell(4);
    cell6 = row.insertCell(5);
    cell7 = row.insertCell(6);
    cell8 = row.insertCell(7);
    cell1.innerHTML = League[i][0];
    cell2.innerHTML = League[i][1];
    cell3.innerHTML = League[i][2];
    cell4.innerHTML = League[i][3];
    cell5.innerHTML = League[i][4];
    cell6.innerHTML = League[i][5];
    cell7.innerHTML = League[i][6];
    cell8.innerHTML = League[i][7];
}

输入三个分数后，将显示以下内容：

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

Answer 1

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

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

欢呼大家！ :)

Answer 2

对于表更新/问题，请关注updateRow函数。 该行实际更新行rownum column（ <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
  }]
}],

注意，我把这个代码来更新表standings表中与standings-table ID。 我不知道这些是什么，所以我只是在数组中插入一些东西，然后使用

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>