TA貢獻1864條經驗 獲得超6個贊
一種方法是創建一個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>
TA貢獻1821條經驗 獲得超5個贊
問題出在您的第二個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>
舉報