html Javascript添加和编辑功能

pokxtpni 于 2023-05-12 发布在 Java

关注(0)|答案(2)|浏览(110)

我有两个问题。提交（添加）产品信息后，我想将输入字段设为空。第二个问题是使编辑功能工作。它不工作。我不知道该怎么做。希望你能帮上忙。

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>

Html

来源：https://stackoverflow.com/questions/44771557/javascript-add-and-edit-function

2条答案

按热度按时间

vjhs03f71#

您需要向“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;

你觉得可以吗？

赞(0）回复(0）举报 2023-05-12

ifsvaxew2#

编辑单元格

在包含用户单击的编辑按钮的<tr>的前4个<td>上，将["contenteditable"]属性从/切换到true/false。

清除`<input>` s

只需将按钮的[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>

赞(0）回复(0）举报 2023-05-12

我来回答

html Javascript添加和编辑功能

2条答案

编辑单元格

清除`<input>` s

相关问题

热门标签

最新问答

html Javascript添加和编辑功能

2条答案

编辑单元格

清除<input> s

相关问题

热门标签

最新问答

清除`<input>` s