提交后,表格输入没有出现在表格标题下时出现问题。即使在我多次阅读代码之后。我的代码有什么问题?
或在正确,轻松地编写代码方面有任何建议,请提供帮助。
当我输入值并提交时,表仍然保持不变,没有任何更改。
var form = document.getElementById("form");
var table = document.getElementById("table");
//add event listener to form
form.addEventListener("submit", addItem);
function addItem(e) {
e.preventDefault();
// get customer name input value
var customerName = document.getElementById("customerName").value;
//get item purchased input value
var itemPurchased = document.getElementById("itemPurchased").value;
//get quantity input value
var quantity = document.getElementById("quantity").value;
// get date input value
var date = document.getElementById("date").value;
//create rows
var row = table.insertRow(2);
//create row cells
var customerCell = row.insertCell(0);
customerCell.innerHTML = customerName;
var ItemCell = row.insertCell(1);
ItemCell.innerHTML = itemPurchased;
var quantityCell = row.insertCell(2);
quantityCell.innerHTML = quantity;
var dateCell = row.insertCell(3);
dateCell.innerHTML = date;
var DeleteCell = row.insertCell(4);
DeleteCell.innerHTML = x;
}
<div class="container">
<!-- Form section -->
<div class="Form-container">
<form id="form">
<label for="customerName" class="input-title">CUSTOMER NAME</label><br>
<input type="text" class="record-input" id="customerName" required><br><br><br>
<label for="itemPurchased" class="input-title">ITEM PURCHASED</label><br>
<input type="text" class="record-input" id="itemPurchased" required><br><br><br>
<label for="quantity" class="input-title">QUANTITY</label><br>
<input type="text" class="record-input" id="quantity" required><br><br><br>
<label for="date" class="input-title">Date</label><br>
<input type="date" class="record-input" id="DATE" required><br><br>
<input type="submit" value="Submit" class="record-submit">
</form>
</div>
<!-- Table section -->
<div class="record-container" id="container">
<table id="table">
<tr>
<th>CUSTOMER NAME</th>
<th>ITEM PURCHASED</th>
<th>QUANTITY</th>
<th>DATE</th>
</tr>
<tr>
<td>EBUBE ODINAKA</td>
<td>iPhone 11 pro max</td>
<td>1</td>
<td>07/01/2021</td>
<td class="deleteTable"><button>x</button></td>
</tr>
</table>
</div>
</div>
修复,尝试一下
//MY JAVASCRIPT CODE
var form = document.getElementById("form");
var table = document.getElementById("table");
//add event listener to form
form.addEventListener("submit", addItem);
function addItem(e) {
e.preventDefault();
// get customer name input value
var customerName = document.getElementById("customerName").value;
//get item purchased input value
var itemPurchased = document.getElementById("itemPurchased").value;
//get quantity input value
var quantity = document.getElementById("quantity").value;
// get date input value
var date = document.getElementById("DATE").value;
//create rows
var row = table.insertRow(2);
//create row cells
var customerCell = row.insertCell(0);
customerCell.innerHTML = customerName;
var ItemCell = row.insertCell(1);
ItemCell.innerHTML = itemPurchased;
var quantityCell = row.insertCell(2);
quantityCell.innerHTML = quantity;
var dateCell = row.insertCell(3);
dateCell.innerHTML = date;
var DeleteCell = row.insertCell(4);
DeleteCell.innerHTML = "<button>x</button>";
}
<!-- The main section -->
<div class="container">
<!-- Form section -->
<div class="Form-container">
<form id="form">
<label for="customerName" class="input-title">CUSTOMER NAME</label><br>
<input type="text" class="record-input" id="customerName" required><br><br><br>
<label for="itemPurchased" class="input-title">ITEM PURCHASED</label><br>
<input type="text" class="record-input" id="itemPurchased" required><br><br><br>
<label for="quantity" class="input-title">QUANTITY</label><br>
<input type="text" class="record-input" id="quantity" required><br><br><br>
<label for="date" class="input-title">Date</label><br>
<input type="date" class="record-input" id="DATE" required><br><br>
<input type="submit" value="Submit" class="record-submit">
</form>
</div>
<!-- Table section -->
<div class="record-container" id="container">
<table id="table">
<tr>
<th>CUSTOMER NAME</th>
<th>ITEM PURCHASED</th>
<th>QUANTITY</th>
<th>DATE</th>
</tr>
<tr>
<td>EBUBE ODINAKA</td>
<td>iPhone 11 pro max</td>
<td>1</td>
<td>07/01/2021</td>
<td class="deleteTable"><button>x</button></td>
</tr>
</table>
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句