Question

我目前有一个程序允许我制作购物清单，我可以在其中添加名称和价格。我正在使用表格，但现在我被告知需要更改列表中的所有内容以便使用appendChild()和createElement()，如何更改JavaScript中的所有内容？

let addItem = document.querySelector("#addButton");
let newTab = document.querySelector(".adding");
let table = document.querySelector("table");
let priceInput = document.querySelector("#price");
let productInput = document.querySelector("#product")
let total = document.querySelector("#total")

addItem.addEventListener("click", addProduct);

function addProduct() {

  if (priceInput.value == "" || isNaN(priceInput.value)) {
    return;
  }

  let removeBtn = document.createElement("button");
  removeBtn.innerHTML = "Delete item";

  let row = table.insertRow(1);
  let cell1 = row.insertCell(0);
  let cell2 = row.insertCell(1);
  let cell3 = row.insertCell(2);
  let cell4 = row.insertCell(3);

  cell4.classList.add("Total");
  cell1.appendChild(removeBtn);
  cell2.innerHTML = productInput.value
  cell3.innerHTML = parseFloat(priceInput.value);
  cell4.innerHTML = parseFloat(price.value);

  removeBtn.addEventListener("click", function(event) {
    this.parentElement.parentElement.classList.toggle("complete");
    displayTotal();
  });
  displayTotal();
}

function displayTotal() {
  var toPay = document.getElementsByClassName("Total");
  var suma = 0;
  for (var n = 0; n < toPay.length; n++) {
    if (!toPay[n].parentElement.classList.contains("complete")) {
      suma = suma + parseFloat(toPay[n].innerHTML);
    }
  }
  total.innerHTML = parseFloat(suma);
}

<div class="add">
  <label id="item"></label>
  <input type="text" id="product" placeholder="Insert Product">
  <label></label>
  <input type="text" id="price" placeholder="Insert Price">
</div>
<button id="addButton">Add item</button>
<table>
  <tr>
    <td></td>
    <td>Product </td>
    <td>Price</td>
    <td>Total</td>
    <tr>
      <td colspan="3">Total</td>
      <td id="total">0</td>
    </tr>
</table>

Answer 1

正如我所说，你拥有建立清单所需的一切。

您可能需要的唯一额外内容是CSS来对齐所有内容。与具有单元格以对齐所有内容的表格不同，列表确实具有任何内容，因此您需要创建自己的“单元格” - 您可以使用DIV元素执行此操作。

//no need to use document.querySelector if you have an ID or class; 
//use document.getElementByID or document.getElementsByClassName

let addItem = document.getElementById("addButton");
let newTab = document.getElementsByClassName("adding");
let shoppingList = document.getElementById("shopping-list");
let priceInput = document.getElementById("price");
let productInput = document.getElementById("product");
let total = document.getElementById("total");

addItem.addEventListener("click", addProduct);

function addProduct() {

  if (priceInput.value == "" || isNaN(priceInput.value)) {
    return;
  }

  //instead of using rows and cells, use list items (LI) and containers (DIV) with a class
  let listItem = document.createElement('li');
  let removeBtn = document.createElement("button");
  let productDiv = document.createElement('div');
  let priceDiv = document.createElement('div');
  let totalDiv = document.createElement('div');
  
  //add the containers to the list item
  listItem.appendChild(removeBtn);
  listItem.appendChild(productDiv);
  listItem.appendChild(priceDiv);
  listItem.appendChild(totalDiv);
  
  //add the content to the respective containers
  productDiv.classList.add('product');
  productDiv.innerHTML = productInput.value;
  priceDiv.classList.add('price');
  priceDiv.innerHTML = parseFloat(priceInput.value);
  totalDiv.classList.add('total');
  totalDiv.innerHTML = parseFloat(price.value);
  
  removeBtn.innerHTML = "Delete item";
  removeBtn.addEventListener("click", function(event) {
    this.parentElement.classList.toggle("complete");
    displayTotal();
  });
  
  //add list item to shopping list
  shoppingList.prepend(listItem);
  
  displayTotal();
}

function displayTotal() {
  var toPay = document.getElementsByClassName("total");
  var suma = 0;
  for (var n = 0; n < toPay.length; n++) {
    if (!toPay[n].parentElement.classList.contains("complete")) {
      suma += parseFloat(toPay[n].innerHTML);
    }
  }
  total.innerHTML = suma;
}

li.complete {
 display: none;
}

/* TODO: add styling */

<div class="add">
  <label id="item"></label>
  <input type="text" id="product" placeholder="Insert Product">
  <label></label>
  <input type="text" id="price" placeholder="Insert Price">
</div>
<button id="addButton">Add item</button>

<!-- instead of a table, use a list and give it an ID for referencing -->

<ul id="shopping-list">
	<li>Total <div id="total">0</div></li>
</ul>

在javascript和html购物清单中使用表格改为li

1 个答案: