如何更新 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'),

  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>

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>