如何更新 HTML 表格？

Question

当我输入新的航班号和飞行里程时，我的表格应该显示新记录。无论我输入多少不同的输入，我的表格都会显示标题和第一个输入。

我曾尝试制作一个列表，看看它是否只是桌子，但它做了同样的事情。

Answer 1

一种方法是创建一个array保存，我们称之为，object每次用户添加新记录时更新的航班。航班object包含两个属性：flightNumber和milesFlown。解决方案很简单，而不是每次提交新记录时重新绘制整个表，我们可以准备一个空的HTML，它将JavaScript根据用户条目（存储在航班objects 中array）填充。另外，查找重复条目的航班号，我们可以使用find（该方法Array在对象JavaScript），甚至没有穿过整个飞行循环object小号array（后来的功能会为我们做）。总而言之，这是一个有效的演示，它还包含一些有用的注释，可以在阅读代码时帮助您：/*** flightTable: the HTML table containing the flight records.* btn: the button that triggers a new record creation.* flightNum: the flight number field.* milesFlown: the miles flown field.* addRow: a function that adds a row to the HTML table based on the last record added.* flightArr: an array to store the flights objects.* flightNumVal: the flight number field value.* milesFlownVal: the miles flown field value.* i: curreent index of the flightArr table (used to print the last flight record to the HTML table for example).**/const flightTable = document.getElementById('flight-table'),&nbsp; btn = document.getElementById('display'),&nbsp; flightNum = document.getElementById('flight-number'),&nbsp; milesFlown = document.getElementById('miles-flown'),&nbsp; addRow = () => {&nbsp; &nbsp; /** I strongly suggest you continue reading then come back to this function after all the below **/&nbsp;&nbsp; &nbsp; const tr = document.createElement('tr'),&nbsp; &nbsp; &nbsp; tdFN = document.createElement('td'),&nbsp; &nbsp; &nbsp; tdMF = document.createElement('td');&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; /** getting the last record in the flight objects array **/&nbsp; &nbsp; tdFN.textContent = flightArr[i - 1].flightNumber;&nbsp; &nbsp; tdMF.textContent = flightArr[i - 1].milesFlown;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; /** append the TDs elements to the TR element (all of them are created above dynamically) **/&nbsp; &nbsp; tr.append(tdFN, tdMF);&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; /** append that row to the HTML table **/&nbsp; &nbsp; flightTable.appendChild(tr);&nbsp; }let flightArr = [],&nbsp; flightNumVal = null,&nbsp; milesFlownVal = null,&nbsp; i = 0;btn.addEventListener('click', () => {&nbsp; /** CAUTION: I didn't make any checks to prevent non-numeric values for both fields **/&nbsp; flightNumVal = flightNum.value;&nbsp; milesFlownVal = milesFlown.value;&nbsp;&nbsp;&nbsp; /** checking for duplicate entry **/&nbsp; if (flightArr.find(el => {&nbsp; &nbsp; &nbsp; return el.flightNumber === flightNumVal&nbsp; &nbsp; })) {&nbsp; &nbsp; alert('Duplicate Flight Number entry: "' + flightNumVal + '"');&nbsp; &nbsp; return false;&nbsp; }&nbsp;&nbsp;&nbsp; /** add the entry in the flight objects table **/&nbsp; flightArr[i++] = {&nbsp; &nbsp; flightNumber: flightNumVal,&nbsp; &nbsp; milesFlown: milesFlownVal&nbsp; }; /** add the flight record to the array and increment the counter i (notice the i++) **/&nbsp;&nbsp;&nbsp; addRow(); /** call addRow to add a new row in the table (HTML) **/});/** basic styling for demo purposes **/table {&nbsp; margin-top: 8px;}table, table tr th, table tr td {&nbsp; border: 1px solid #000;&nbsp; border-collapse: collapse;}table tr th {&nbsp; padding: 8px;}<label>Please enter your flight Number:</label><br><input type="text" id="flight-number" name="flightnumber" value="" /> <br /><label>Please enter Miles Flown:</label><br><input type="text" id="miles-flown" name="milesflown" value="" /><br><!-- no inline event handler on the input it will be attached in the "JavaScript" part --><input type="button" id="display" name="display" value="Submit Flight Information" /><!-- the table is prepared initially --><table id="flight-table">&nbsp; <tr>&nbsp; &nbsp; <th>Flight Number</th>&nbsp; &nbsp; <th>Miles Flown</th>&nbsp; </tr></table>

Answer 2

问题出在您的第二个for循环的条件下。由于flightNoArray* 和 **milesFlownArray将始终具有相同的长度，因此您可以使用任一变量length属性作为在屏幕上显示数据的条件，但不能像您尝试的那样同时使用两者。你只需要改变你的updateTable函数<script type="text/javascript">&nbsp; &nbsp; var flightNoArray = [];&nbsp; &nbsp; var milesFlownArray =[];&nbsp; &nbsp; var output = [flightNoArray,milesFlownArray];&nbsp; &nbsp; function addFlightToArrays(){&nbsp; &nbsp; &nbsp; &nbsp; var flightNum = document.getElementById('flightNumber').value;&nbsp; &nbsp; &nbsp; &nbsp; for (var i = 0; i < flightNoArray.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (flightNum == flightNoArray[i]){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert("You CANNOT enter in duplicate flight Numbers");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; if (flightNum !== flightNoArray[i]){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flightNoArray.push(flightNum);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; var flightMiles = document.getElementById('milesFlown').value;&nbsp; &nbsp; &nbsp; &nbsp; milesFlownArray.push(flightMiles);&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; console.log(flightNoArray);&nbsp; &nbsp; &nbsp; &nbsp; updateTable();&nbsp; &nbsp; &nbsp; &nbsp; console.log(milesFlownArray);&nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; }&nbsp; &nbsp; var table = document.createElement('TABLE');&nbsp; &nbsp; var tbody= document.createElement('TBODY');&nbsp; &nbsp; table.appendChild(tbody);&nbsp; &nbsp; var currentEntry = 0;&nbsp; &nbsp; function updateTable(){&nbsp; &nbsp; &nbsp; &nbsp; var tableUpdate= document.getElementById("flightTable");&nbsp; &nbsp; &nbsp; &nbsp; var table = document.createElement('TABLE');&nbsp; &nbsp; &nbsp; &nbsp; var tbody= document.createElement('TBODY');&nbsp; &nbsp; &nbsp; &nbsp; var tr = document.createElement('TR');&nbsp; &nbsp; &nbsp; &nbsp; table.appendChild(tbody);&nbsp; &nbsp; &nbsp; &nbsp; //create header&nbsp; &nbsp; &nbsp; &nbsp; tbody.appendChild(tr);&nbsp; &nbsp; &nbsp; &nbsp; var heading = ["Flight Number", "Miles Flown"];&nbsp; &nbsp; &nbsp; &nbsp; for (var col = 0; col<heading.length; col++)&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var th = document.createElement('TH');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; th.width = '75';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; th.appendChild(document.createTextNode(heading[col]));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tr.appendChild(th);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; for (var f = currentEntry; f<flightNoArray.length; f++)&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tr = document.createElement('TR');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var td1 = document.createElement('TD');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var td2 = document.createElement('TD');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; td1.appendChild(document.createTextNode(flightNoArray[f]));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; td2.appendChild(document.createTextNode(milesFlownArray[f]));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tr.appendChild(td1);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tr.appendChild(td2);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tbody.appendChild(tr);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; currentEntry++;&nbsp; &nbsp; &nbsp; &nbsp; tableUpdate.appendChild(table);&nbsp; &nbsp; }</script><form name="getClassLevel">&nbsp; &nbsp; <label>Please enter your flight Number:</label><br>&nbsp; &nbsp; <input type="text" id="flightNumber" name="flightnumber" value=""&nbsp; /> <br />&nbsp; &nbsp; <label>Please enter Miles Flown:</label><br>&nbsp; &nbsp; <input type="text" id="milesFlown" name="milesflown" value="" />&nbsp; &nbsp; <br>&nbsp; &nbsp; <input type="button" id="display" name="display" value="Submit Flight Information" onclick=" return addFlightToArrays(); "/>&nbsp; &nbsp; <div id="flightTable"></div></form>