我有两个问题。提交（添加）产品信息后，我想将输入字段留空。第二个问题是使编辑功能起作用。它不起作用。我不知道该怎么做。希望你能帮忙。
var qtyTotal = 0;
var priceTotal = 0;
function addProduct() {
var productID = document.getElementById("productID").value;
var product_desc = document.getElementById("product_desc").value;
var qty = document.getElementById("quantity").value;
// qtyTotal = qtyTotal + parseInt(qty);
//document.getElementById("qtyTotals").innerHTML=qtyTotal;
var price = document.getElementById("price").value;
//priceTotal = priceTotal + parseInt(price);
//document.getElementById("priceTotals").innerHTML=priceTotal;
var table=document.getElementById("results");
var row=table.insertRow(-1);
var cell1=row.insertCell(0);
var cell2=row.insertCell(1);
var cell3=row.insertCell(2);
var cell4=row.insertCell(3);
var cell5=row.insertCell(4);
var cell6=row.insertCell(5);
cell1.innerHTML=productID;
cell2.innerHTML=product_desc;
cell3.innerHTML=qty;
cell4.innerHTML=price;
cell5.innerHTML=' <button type="button" onClick="editProduct();"/>Edit</button>';
cell6.innerHTML ='<button type="button" onClick="deleteProduct(this);">Delete</button>';
}
function editProduct(){
document.getElementById("productID").value = productID;
document.getElementById("product_desc").value = product_desc;
document.getElementById("quantity").value = qty;
document.getElementById("price").value = price;
}
function deleteProduct(node){
r=node.parentNode.parentNode;
r.parentNode.removeChild(r);
}<!DOCTYPE html>
<html>
<head>
<title>Shopping Cart Pure Javascript</title>
</head>
<body>
<form name="order" id="order">
<table>
<tr>
<td>
<label for="productID">Product ID:</label>
</td>
<td>
<input id="productID" name="product" type="text" size="28" required/>
</td>
</tr>
<tr>
<td>
<label for="product">Product Desc:</label>
</td>
<td>
<input id="product_desc" name="product" type="text" size="28" required/>
</td>
</tr>
<tr>
<td>
<label for="quantity">Quantity:</label>
</td>
<td>
<input id="quantity" name="quantity" width="196px" required/>
</td>
</tr>
<tr>
<td>
<label for="price">Price:</label>
</td>
<td>
<input id="price" name="price" size="28" required/>
</td>
</tr>
</table>
<input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset" />
<input type="button" onclick="addProduct();" value="Add New Product" >
</form>
<br>
<table id="results">
<thead>
<tr>
<th scope="col" width="50">Product ID</th>
<th scope="col" width="100">Product Description</th>
<th scope="col" width="50">Quantity</th>
<th scope="col" width="50">Price</th>
<th scope="col" width="50">Action</th>
</tr>
</thead>
</table>
<!--<table id="resultTotals" width="360">
<tr>
<td scope="col" width="120">Totals</td>
<td scope="col" width="120"><div id="qtyTotals"></div></td>
<td scope="col" width="120"><div id="priceTotals"></div></td>
</tr>
</table>*/-->
</body>
</html>您需要将参数传递到您的“editProduct”函数中以使其工作。
cell5.innerHTML=' <button type="button" onClick="editProduct(\''+productID+'\', \''+product_desc+'\', \''+qty+'\', \''+price+'\');"/>Edit</button>';
function editProduct(productID, product_desc, qty, price){
document.getElementById("productID").value = productID;
document.getElementById("product_desc").value = product_desc;
document.getElementById("quantity").value = qty;
document.getElementById("price").value = price;
}
然后你需要小心一些输入是否为空，例如输入一些默认值：
var productID = document.getElementById("productID").value || "none";
var qty = document.getElementById("quantity").value || 0;
你可以吗？
在包含用户单击的编辑按钮的
["contenteditable"]truefalse<td><tr><input>只需将按钮的
[type]"button""reset"细节在例子中注释
let qtyTotal = 0;
let priceTotal = 0;
// References all <input> in <form>
const fc = document.forms.order.elements;
function addProduct() {
const productID = fc.productID.value;
const product_desc = fc.product_desc.value;
const qty = fc.quantity.value;
const price = fc.price.value;
const table = document.getElementById("results");
const row = table.insertRow(-1);
const cell1 = row.insertCell(0);
const cell2 = row.insertCell(1);
const cell3 = row.insertCell(2);
const cell4 = row.insertCell(3);
const cell5 = row.insertCell(4);
const cell6 = row.insertCell(5);
cell1.innerHTML = productID;
cell2.innerHTML = product_desc;
cell3.innerHTML = qty;
cell4.innerHTML = price;
cell5.innerHTML = ' <button type="button" onClick="editProduct(this);"/>Edit</button>';
cell6.innerHTML = '<button type="button" onClick="deleteProduct(this);">Delete</button>';
}
function editProduct(node) {
/*
Get the <tr> that the clicked button (node) is within with .closest().
Collect the all <td> of <tr> with .cells into an array with Array.from().
*/
const cells = Array.from(node.closest("tr").cells);
/*
For the first 4 <td>s, toggle the ["contenteditable"] attribute.
*/
cells.forEach((cell, index) => {
if (index < 4) {
cell.toggleAttribute("contenteditable");
}
});
}
function deleteProduct(node) {
/*
Find the <tr> that contains the clicked button and remove the <tr>
*/
node.closest("tr").replaceChildren();
}<!DOCTYPE html>
<html>
<head>
<title>Shopping Cart Pure Javascript</title>
</head>
<body>
<!--
["required"] attribute only applies if <form> is being submitted.
-->
<form id="order">
<table>
<tr>
<td>
<label for="productID">Product ID:</label>
</td>
<td>
<input id="productID" name="product">
</td>
</tr>
<tr>
<td>
<label for="product_desc">Product Desc:</label>
</td>
<td>
<input id="product_desc" name="product">
</td>
</tr>
<tr>
<td>
<label for="quantity">Quantity:</label>
</td>
<td>
<input id="quantity" name="quantity">
</td>
</tr>
<tr>
<td>
<label for="price">Price:</label>
</td>
<td>
<input id="price" name="price">
</td>
</tr>
</table>
<input type="reset">
<!--
Change [type] to "reset" so the <form> will be cleared when
this button is clicked.
-->
<input onclick="addProduct();" type="reset" value="Add New Product">
</form>
<br>
<table>
<thead>
<tr>
<th scope="col" width="50">ID</th>
<th scope="col">Product Description</th>
<th scope="col" width="50">Quantity</th>
<th scope="col" width="50">Price</th>
<th scope="col" width="50">Action</th>
</tr>
</thead>
<!--
Add <tbody> and assign #id to it instead of <table>.
Otherwise each new <tr> will be inserted into <thead>
-->
<tbody id="results"></tbody>
</table>
</body>
</html>