Question

我做了一个简单的折扣计算，当用户输入任何值时，应该更新价格。我尝试了很多次，但始终将打印的数组值打印在第一行中。我在打印数组时总是遇到同样的问题，如果您提供任何推荐的视频或文章以更好地理解这一主题，我将不胜感激。谢谢

.vscode

我的脚本在这里，我无法更新价格单元格，

          <input type="number" id="inputValue">
          <input type="button" value="Submit" id="submitBtn">

          <table id='mytable'>
                <thead>
                        <td>Discount Products</td>
                        <td>Price One</td>
                        <td>Price Two</td>
                </thead>
                <tbody id="tbody">
                    <tr>
                        <td>Product 1</td>
                        <td class="price-one one"> 100</td>
                        <td class="price-two one">200</td>
                    </tr>
                    <tr>
                        <td>Product 2</td>
                        <td class="price-one one"> 300</td>
                        <td class="price-two one">400</td>
                    </tr>
                    <tr>
                        <td>Product 3</td>
                        <td class="price-one one"> 500</td>
                        <td class="price-two one">600</td>
                    </tr>
                    <tr>
                        <td>Product 4</td>
                        <td class="price-one one"> 700</td>
                        <td class="price-two one">800</td>
                    </tr>
                </tbody>
            </table>

Answer 1

我看不到您如何打印它们，但是您可以像设置它们一样设置表格内容：

mytable.rows[i].cells[j].innerText = parseFloat(orginalPrice) - (inputValue/100 * orginalPrice);

您可以了解有关表单元格here的更多信息。

这是一个工作的小提琴：https://jsfiddle.net/u1m0gjyk/

Answer 2

您是如此亲密。代替此行：

prices[i].push(parseFloat(orginalPrice) - (inputValue/100 * orginalPrice));

将计算值推入未连接到DOM的空数组中，您需要这些行：

var newPrice = parseFloat(orginalPrice) - (inputValue/100 * orginalPrice);
mytable.rows[i].cells[j].innerText = newPrice;

将计算出的值添加到每个单元格的innerText属性中（即，将值写回到DOM）：

const submitBtn = document.getElementById('submitBtn');
    submitBtn.addEventListener('click', function () {   

        const mytable = document.querySelector('#mytable #tbody');

        const inputValue = document.getElementById('inputValue').value;

        const prices = [];

        for (i = 0; i < mytable.rows.length; i++) {

            prices[i] = [];

            for (j = 1; j < mytable.rows[i].cells.length; j++) {
                const orginalPrice = mytable.rows[i].cells[j].innerText;

                var newPrice = parseFloat(orginalPrice) - (inputValue/100 * orginalPrice);
                mytable.rows[i].cells[j].innerText = newPrice;
            }
        }
     });

<input type="number" id="inputValue">
          <input type="button" value="Submit" id="submitBtn">

          <table id='mytable'>
                <thead>
                        <td>Discount Products</td>
                        <td>Price One</td>
                        <td>Price Two</td>
                </thead>
                <tbody id="tbody">
                    <tr>
                        <td>Product 1</td>
                        <td class="price-one one"> 100</td>
                        <td class="price-two one">200</td>
                    </tr>
                    <tr>
                        <td>Product 2</td>
                        <td class="price-one one"> 300</td>
                        <td class="price-two one">400</td>
                    </tr>
                    <tr>
                        <td>Product 3</td>
                        <td class="price-one one"> 500</td>
                        <td class="price-two one">600</td>
                    </tr>
                    <tr>
                        <td>Product 4</td>
                        <td class="price-one one"> 700</td>
                        <td class="price-two one">800</td>
                    </tr>
                </tbody>
            </table>

打印输出并将更新的数组值替换到表单元格

2 个答案: