訂單輸入表單包含產品名稱、價格和數量欄：
<table id="order-products" class="mobileorder-table">
<colgroup>
<col style="width: 80%;">
<col style="width: 10%;">
<col style="width: 10%;">
</colgroup>
<tbody>
<tr>
<td>
Product1
</td>
<td>
<span class="mobileorder-price">0,98</span>
</td>
<td>
<input data-product="4750211645618" class="quantity" id="product_Soodkogus" name="product.Soodkogus"
type="number" min="0" max="999999" value=""
onblur="orderSumRefresh()" />
</td>
</tr>
</tbody>
</table>
Order total <p id="js-doksumma"></p>
如果數量發生變化，訂單總值應更新。我試過了
<script>
function parseFloatFormatted(txt) {
if (typeof txt !== 'string' || txt === null || txt === "") {
return 0
}
return parseFloat(txt.replace(',', '.').replace(' ', ''))
}
function orderSumRefresh() {
let totalAmount = 0
const table = document.getElementById("order-products")
table.rows.forEach((row) => {
//for (let i in table.rows) {
// const row = table.rows[i]
const hind = row.cells[1].querySelector(".mobileorder-price").value
const kogus = row.cells[2].querySelector(".quantity").value
const rowSum = Math.round(parseFloatFormatted(hind)* parseFloatFormatted(kogus) * 100) / 100
totalAmount = rowSum
});
var dok = document.getElementById("js-doksumma")
dok.innerText = totalAmount.toFixed(2)
}
</script>
但有錯誤
如何正確實施？應該使用純 CSS、javascript 還是查詢？
現代 Chrome 瀏覽器用于手機、ASP.NET 6 MVC Razor 應用程式。
uj5u.com熱心網友回復：
你的問題來自這里
for (let i in table.rows) {}
該值將是"0"and "length"（不是您期望的索引），因此在嘗試訪問時會引發錯誤row.cells["length"].childNodes（row.cells["length"]未定義）
我建議您將其修改為
for (const row of table.rows) {}
完整的代碼可以是
function parseFloatFormatted(txt) {
if (typeof txt !== 'string' || txt === null || txt === "") {
return 0
}
return parseFloat(txt.replace(',', '.').replace(' ', ''))
}
function orderSumRefresh() {
let totalAmount = 0
const table = document.getElementById("order-products")
for (const row of table.rows) {
const hind = row.cells[1].childNodes[0].innerHTML
const kogus = row.cells[2].childNodes[0].innerText
const rowSum = Math.round(parseFloatFormatted(hind) * parseFloatFormatted(kogus) * 100) / 100
totalAmount = rowSum
}
const dok = document.getElementById("js-doksumma")
dok.innerText = totalAmount.toFixed(2)
}<table id="order-products" class="mobileorder-table">
<colgroup>
<col style="width: 80%;">
<col style="width: 10%;">
<col style="width: 10%;">
</colgroup>
<tbody>
<tr>
<td>
Product1
</td>
<td>
<span class="mobileorder-price">0,98</span>
</td>
<td>
<input data-product="4750211645618" class="quantity" id="product_Soodkogus" name="product.Soodkogus" type="number" min="0" max="999999" value="" onblur="orderSumRefresh()" />
</td>
</tr>
</tbody>
</table>
Order total
<p id="js-doksumma"></p>uj5u.com熱心網友回復：
尼克是正確的。請記住，table.rows 不是一個陣列，而是一個 HTMLCollection。您只需執行以下操作即可解決此問題：
const table = document.getElementById("order-products")
for (const row of Array.from(table.rows)) {
}
如果您想親自查看正在迭代的“長度”屬性，請打開開發工具，從元素選項卡中選擇表，然后在控制臺中運行此代碼段：
for (let i in $0.rows) {
console.log(i);
console.log($0.rows[i].cells[0]);
}
您將看到最后一次迭代列印“長度”，然后拋出例外。
uj5u.com熱心網友回復：
正如 Nick Vu 所說，第一個問題在 for 回圈中，我改為：
for (let i = 0; i < table.rows.length; i ) {
我在代碼中發現了更多問題，例如 childNodes 的索引是錯誤的，使用
console.log(row.cells[1].childNodes)
您可以看到有 3 個孩子，您正在尋找中間的孩子（索引：1）
然后要訪問輸入元素的資料，您需要使用如下.value屬性：
const kogus = row.cells[2].childNodes[1].value
********************* 編輯 *******************
更改代碼作為答案已更改。
要訪問 html 元素的資料，請使用.innerHTML屬性。
function parseFloatFormatted(txt) {
if (typeof txt !== 'string' || txt === null || txt === "") {
return 0
}
return parseFloat(txt.replace(',', '.').replace(' ', ''))
}
function orderSumRefresh() {
let totalAmount = 0
const table = document.getElementById("order-products")
/*
for (let i = 0; i < table.rows.length; i ) {
const row = table.rows[i]
const hind = row.cells[1].childNodes[1].innerHTML
const kogus = row.cells[2].childNodes[1].value
const rowSum = Math.round(parseFloatFormatted(hind) * parseFloatFormatted(kogus) * 100) / 100
totalAmount = rowSum
}
*/
for (const row of table.rows) {
const hind = row.cells[1].querySelector(".mobileorder-price").innerHTML
const kogus = row.cells[2].querySelector(".quantity").value
const rowSum = Math.round(parseFloatFormatted(hind)* parseFloatFormatted(kogus) * 100) / 100
totalAmount = rowSum
}
const dok = document.getElementById("js-doksumma")
dok.innerText = totalAmount.toFixed(2)
}<table id="order-products" class="mobileorder-table">
<colgroup>
<col style="width: 80%;">
<col style="width: 10%;">
<col style="width: 10%;">
</colgroup>
<tbody>
<tr>
<td>
Product1
</td>
<td>
<span class="mobileorder-price">0,98</span>
</td>
<td>
<input data-product="4750211645618" class="quantity" id="product_Soodkogus" name="product.Soodkogus"
type="number" min="0" max="999999" value="" onblur="orderSumRefresh()" />
</td>
</tr>
</tbody>
</table>
Order total <p id="js-doksumma"></p>我建議你使用console.log()并記錄一些變數，看看代碼是否有問題。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/456334.html
標籤：javascript html css javascript 对象 模糊
上一篇：單擊一次反應后如何禁用div