如何更新 HTML 表格？

Question

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

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

Answer 1

一种方法是创建一个array 来保存，我们称之为航班object，每次用户添加新记录时都会更新该航班。一个航班object 包含两个属性：flightNumber 和milesFlown。

解决方案很简单，我们可以准备一个空的HTML，根据用户条目（存储在航班objects array)。

此外，要查找航班号的重复条目，我们可以使用 find 方法（JavaScript 中的 Array 对象），甚至无需遍历整个航班 objects array（稍后的函数将为我们完成）。

总而言之，这是一个工作演示，它还包含一些有用的 cmets，可以在阅读代码时帮助您：

/**
* 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'),
  btn = document.getElementById('display'),
  flightNum = document.getElementById('flight-number'),
  milesFlown = document.getElementById('miles-flown'),
  addRow = () => {
    /** I strongly suggest you continue reading then come back to this function after all the below **/ 
    const tr = document.createElement('tr'),
      tdFN = document.createElement('td'),
      tdMF = document.createElement('td');
    
    /** getting the last record in the flight objects array **/
    tdFN.textContent = flightArr[i - 1].flightNumber;
    tdMF.textContent = flightArr[i - 1].milesFlown;
    
    /** append the TDs elements to the TR element (all of them are created above dynamically) **/
    tr.append(tdFN, tdMF);
    
    /** append that row to the HTML table **/
    flightTable.appendChild(tr);
  }

let flightArr = [],
  flightNumVal = null,
  milesFlownVal = null,
  i = 0;

btn.addEventListener('click', () => {
  /** CAUTION: I didn't make any checks to prevent non-numeric values for both fields **/

  flightNumVal = flightNum.value;
  milesFlownVal = milesFlown.value;
  
  /** checking for duplicate entry **/
  if (flightArr.find(el => {
      return el.flightNumber === flightNumVal
    })) {
    alert('Duplicate Flight Number entry: "' + flightNumVal + '"');
    return false;
  }
  
  /** add the entry in the flight objects table **/
  flightArr[i++] = {
    flightNumber: flightNumVal,
    milesFlown: milesFlownVal
  }; /** add the flight record to the array and increment the counter i (notice the i++) **/
  
  addRow(); /** call addRow to add a new row in the table (HTML) **/
});

/** basic styling for demo purposes **/

table {
  margin-top: 8px;
}

table, table tr th, table tr td {
  border: 1px solid #000;
  border-collapse: collapse;
}

table tr th {
  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">
  <tr>
    <th>Flight Number</th>
    <th>Miles Flown</th>
  </tr>
</table>

详细了解find 功能。

详细了解addEventListener 功能。

Answer 2

问题出在您的第二个 for 循环的 条件 中。由于 flightNoArray* 和 **milesFlownArray 将始终具有相同的长度，您可以使用任一变量 length 属性作为在屏幕上显示数据的条件，但不能同时使用你试着去做。

您只需要更改您的 updateTable 功能

<script type="text/javascript">

    var flightNoArray = [];
    var milesFlownArray =[];
    var output = [flightNoArray,milesFlownArray];

    function addFlightToArrays(){

        var flightNum = document.getElementById('flightNumber').value;
        for (var i = 0; i < flightNoArray.length; i++) {

            if (flightNum == flightNoArray[i]){
                alert("You CANNOT enter in duplicate flight Numbers");
                return;
            }
        }

        if (flightNum !== flightNoArray[i]){
            flightNoArray.push(flightNum);
        }

        var flightMiles = document.getElementById('milesFlown').value;

        milesFlownArray.push(flightMiles);
        {

        }
        console.log(flightNoArray);
        updateTable();
        console.log(milesFlownArray);

        return false;
    }

    var table = document.createElement('TABLE');
    var tbody= document.createElement('TBODY');
    table.appendChild(tbody);

    var currentEntry = 0;

    function updateTable(){
        var tableUpdate= document.getElementById("flightTable");
        var table = document.createElement('TABLE');
        var tbody= document.createElement('TBODY');
        var tr = document.createElement('TR');

        table.appendChild(tbody);
        //create header
        tbody.appendChild(tr);

        var heading = ["Flight Number", "Miles Flown"];

        for (var col = 0; col<heading.length; col++)
        {
            var th = document.createElement('TH');
            th.width = '75';
            th.appendChild(document.createTextNode(heading[col]));
            tr.appendChild(th);
        }

        for (var f = currentEntry; f<flightNoArray.length; f++)
        {
            tr = document.createElement('TR');
            var td1 = document.createElement('TD');
            var td2 = document.createElement('TD');

            td1.appendChild(document.createTextNode(flightNoArray[f]));
            td2.appendChild(document.createTextNode(milesFlownArray[f]));

            tr.appendChild(td1);
            tr.appendChild(td2);
            tbody.appendChild(tr);
        }
        currentEntry++;
        tableUpdate.appendChild(table);
    }
</script>

<form name="getClassLevel">

    <label>Please enter your flight Number:</label><br>
    <input type="text" id="flightNumber" name="flightnumber" value=""  /> <br />

    <label>Please enter Miles Flown:</label><br>
    <input type="text" id="milesFlown" name="milesflown" value="" />
    <br>

    <input type="button" id="display" name="display" value="Submit Flight Information" onclick=" return addFlightToArrays(); "/>
    <div id="flightTable"></div>
</form>

所以调用的时候不会每次都创建和显示header，也只会显示新的entry。