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>

标签： javascripthtmlcss

Answer 1

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

下面是演示代码，你可以参考这里。

!将帮助我们查找任何输入是否为空或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. 您正在检查itemNamenull，甚至在您的代码准备好它的值之前。因此，每次即使数据正确，也会评估您的ifalert条件，并触发相应的条件。
2. 您需要将与计算总价和显示代码相关的所有内容放入您的else条件中，然后if条件无法评估为true。

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>