javascript - 打印出更新的数组值并将其替换为表格单元格

Question

我做了一个简单的折扣计算，当用户输入任何值时，应该更新价格。我尝试了很多次，但打印的数组值总是打印在第一行。我在打印数组时总是遇到同样的问题，如果您推荐任何视频或文章来了解更多这个主题，我会很高兴。谢谢

          <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>

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

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;

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

标签： javascript

Answer 1

你是如此接近。而不是这一行：

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>