javascript - 如何在 html 和 javascript 中打印或从 HTML TABLE(用户输入)中获取单元格值

Question

我正在尝试从 HTML 表格中获取单元格值，以便将它们显示到表格中。

我如何获取单元格的值以便将其传递给表格单元格 我下面的 JavaScript 代码显示找不到页面？

代码:

function getValues() {

  let item = itemName;

  if (item == null) 

    alert("Please you need to fill all fields  to continue");

    else

      alert("success")

  

  //Data collection

  var itemName = document.getElementsByName("itemName")[0].value;

  var itemQty = document.getElementsByName("itemQty")[0].value;

  var itemPrice = document.getElementsByName("itemPrice")[0].value;

  var itemAmt = itemPrice * itemQty;


  var itemDate = document.getElementsByName("itemDate")[0].value;

  var total = "Your total amount of items bought is " + " " + "#" + itemAmt;

  //data display

  document.getElementById("tag").innerHTML = total;

  document.getElementById("itemName").innerHTML = (itemName);

  document.getElementById("itemQty").innerHTML = (itemQty);

  document.getElementById("itemPrice").innerHTML = (itemPrice);

  document.getElementById("itemAmt").innerHTML = (itemAmt);

  document.getElementById("itemDate").innerHTML = (itemDate);

  //conditional statement for empty field

  // if ( itemAmt === true){

  alert(total)

  //  }else{

  // alert("Please you need to fill all fields  to continue")

  //}  

}

  body {
  background: #fff;
}

.tag {
  background: #ccc;
  width: 100%;
  height: 150px;
  font-size: 20px;
  transform: uppercase;
  margin-top: 30px;
  padding-top: 30px;
  position: absolute;
  justify-space: in-between;
}

#item {
  width: 19.35%;
  height: auto;
  background: pink;
  float: left;
  text-align: center;
  font-size: 10px;
  border: 1px solid black;
}

.item {
  width: 19.35%;
  height: auto;
  background: pink;
  float: left;
  text-align: center;
  font-size: 10px;
  border: 1px solid black;
  .frame {
    width: 90%;
    height: 200px;
    background: grey;
    padding: 10px;
    border-radius: 3px;
    overflow-y: auto;
    float: left;
    position: relative;
    color: #231ccb;
  }

<div class="frame">

  <p><label> Item:<input type="text" name="itemName" placeholder="item" required> </label></p>

  <br>

  <p><label> Quantity:<input type="text" name="itemQty" required> </label></p>

  <br>

  <p><label> Price :<input type="number" name="itemPrice" required> </label></p>

  <!--<br>
   
        <p><label> Amount: <input type="number" name="itemAmt" placeholder="#" required> </label></p>-->

  <br>

  <p><label> Date :<input type="Date" name="itemDate" required> </label></p>

</div>

<br>

<button onclick="getValues()"> Add Item </button>

</form>

<!--Table Header-->

<div class="tag">

  <div id="item">Item Name</div>

  <div id="item">Quantity</div>

  <div id="item">Price</div>

  <div id="item">Amount</div>

  <div id="item">Date</div>

  <!--Display item variable-->

  <div class="item">

    <p id="itemName"></p>

  </div>

  <div class="item">

    <p id="itemQty"> </p>

  </div>

  <div class="item">

    <p id="itemPrice"></p>

  </div>

  <div class="item">

    <p id="itemAmt"> </p>

  </div>

  <div class="item">

    <p id="itemDate"></p>

  </div>

  <br>

  <br>

  <br>

  <p id="tag"> Hello world</p>

</div>

Answer 1

您可以使用感叹号 (!) 符号，称为bang，这是逻辑NOT 运营商。

下面是演示代码，您可以引用这里。

! 将帮助我们查找是否有任何input 为empty 或null 或undefined.

const btn = document.querySelector("#add-items");

btn.addEventListener("click", addItems);

function addItems() {
  let itemName = document.querySelector("#item-name").value;
  
  let itemQnt = document.querySelector("#item-quantity").value;
  
  if(!itemName) alert("Please provide item name.");
  else if(!itemQnt) alert("Please provide item quantity.");
  else alert("Success");
}

<label for="item-name"> Item Name: 
  <input type="text" placeholder="Item Name" id="item-name" />
</label>

<br><br>

<label for="item-quantity"> Item Quantity: 
  <input type="number" placeholder="Item Quantity" id="item-quantity" />
</label>

<br><br>
<button type="button" id="add-items">Add Item</button>

现在，来到您的代码中，其中一些需要在您的代码中进行更改。

1. 您正在检查 itemName 是否为 null，甚至在您的代码准备好它的值之前。因此，每次即使数据正确，您的 if 条件也会被评估，相应的 alert 将被触发。
2. 在 if 条件无法计算为 真。

function getValues() {

  var itemName = document.getElementsByName("itemName")[0].value;

  var itemQty = document.getElementsByName("itemQty")[0].value;

  var itemPrice = document.getElementsByName("itemPrice")[0].value;

  var itemDate = document.getElementsByName("itemDate")[0].value;

  if (!itemName || !itemQty || !itemPrice || !itemDate) {
    alert("Please you need to fill all fields  to continue");
  } else {
    alert("success")

    var itemAmt = itemPrice * itemQty;

    var total = "Your total amount of items bought is " + " " + "#" + itemAmt;

    //data display

    document.getElementById("tag").innerHTML = total;

    document.getElementById("itemName").innerHTML = (itemName);

    document.getElementById("itemQty").innerHTML = (itemQty);

    document.getElementById("itemPrice").innerHTML = (itemPrice);

    document.getElementById("itemAmt").innerHTML = (itemAmt);

    document.getElementById("itemDate").innerHTML = (itemDate);


    alert(total)


  }
}

  }
body {
  background: #fff;
}
.tag {
  background: #ccc;
  width: 100%;
  height: 150px;
  font-size: 20px;
  transform: uppercase;
  margin-top: 30px;
  padding-top: 30px;
  position: absolute;
  justify-space: in-between;
}
#item {
  width: 19.35%;
  height: auto;
  background: pink;
  float: left;
  text-align: center;
  font-size: 10px;
  border: 1px solid black;
}
.item {
  width: 19.35%;
  height: auto;
  background: pink;
  float: left;
  text-align: center;
  font-size: 10px;
  border: 1px solid black;
  .frame {
    width: 90%;
    height: 200px;
    background: grey;
    padding: 10px;
    border-radius: 3px;
    overflow-y: auto;
    float: left;
    position: relative;
    color: #231ccb;
  }

<div class="frame">

  <p><label> Item:<input type="text" name="itemName" placeholder="item" required> </label></p>

  <br>

  <p><label> Quantity:<input type="text" name="itemQty" required> </label></p>

  <br>

  <p><label> Price :<input type="number" name="itemPrice" required> </label></p>


  <br>

  <p><label> Date :<input type="Date" name="itemDate" required> </label></p>

</div>

<br>

<button onclick="getValues()"> Add Item </button>

</form>

<!--Table Header-->

<div class="tag">

  <div id="item">Item Name</div>

  <div id="item">Quantity</div>

  <div id="item">Price</div>

  <div id="item">Amount</div>

  <div id="item">Date</div>

  <!--Display item variable-->

  <div class="item">

    <p id="itemName"></p>

  </div>

  <div class="item">

    <p id="itemQty"> </p>

  </div>

  <div class="item">

    <p id="itemPrice"></p>

  </div>

  <div class="item">

    <p id="itemAmt"> </p>

  </div>

  <div class="item">

    <p id="itemDate"></p>

  </div>

  <br>

  <br>

  <br>

  <p id="tag"> Hello world</p>

</div>