如何從 html 和 javascript 中的 HTML 表（用戶輸入）打印或獲取單元格值

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運算符。

下面是演示代碼，你可以參考這里。

! 將幫助我們查找任何輸入是否為空或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. 您正在檢查 null 的itemName ，甚至在您的代碼准備好它的值之前。 因此，每次即使有正確的數據，也會評估您的if條件，並觸發相應的alert 。
2. 在if條件無法評估為true之后，您需要將與計算總價和顯示代碼相關的所有內容放在else條件中。

 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>