使用JavaScript或超文本标记语言监视表中的更改

Question

我想在网站上更改产品的数量或单价时更改总价。我知道我应该使用onChange函数，但是我不知道如何编写JavaScript代码。

<table id="productTable" class="layui-table">
    <thead>
        <tr>
            <th>No.</th>
            <th>PART NUMBER</th>
            <th>DESCRIPTION</th>
            <th>QTY(PCS)</th>
            <th>UNIT PRICE (USD)</th>
            <th>AMOUNT(USD)</th>
            <th>OPRATION</th>
        </tr>
    </thead>
    <tbody id="columns">
        <tr style="display:none">
            <td>1</td>
            <td><input type="hidden"  name="numberList"></td>
            <td><input type="hidden"  name="remarkList"></td>
            <td><input type="hidden"  name="countList"></td>
            <td><input type="hidden"  name="priceList"></td>
            <td><input type="hidden"  name="totalPriceList"></td>
        </tr>
        <tr  th:each="orderProduct:${orderProducts}">
            <td th:text="${orderProducts.indexOf(orderProduct)+1}"></td>
            <td contenteditable="true" >
                <input type="text"  name="numberList"  class="layui-input number" th:value="${orderProduct.number}">
            </td>
            <td contenteditable="true" >
                <input type="text" name="remarkList" class="layui-input remark" th:value="${orderProduct.remark}">
            </td>
            <td id="productCoun" contenteditable="true" >
                <input id="productCount" type="text" name="countList" onchange="update()" class="layui-input count"
                th:value="${orderProduct.count}">
            </td>
            <td id="normalPric" contenteditable="true" >
                <input id="normalPrice" type="text" name="priceList" onchange="update()" class="layui-input price"
                th:value="${orderProduct.price}">
            </td>
            <td id="totalPric" th:text="${orderProduct.price}*${orderProduct.count}">
                <input id="total" type="text" name="totalPriceList" class="layui-input price"
                th:text="${orderProduct.price}*${orderProduct.count}">
            </td>
            <td>
                <a href="" class="EditBtn">Edit</a>
                <a href="javascript:void(0)" class="delBtn redType" onclick='delColumns(this)'>Del</a>
            </td>
        </tr>
    </tbody>
</table>

我希望每当用户更改其中一个值时，totalPrice = count*price都会刷新。

Answer 1

您可以轻松地监视指向的输入字段(#productCount和#normalPrice)，并根据它更改#total的值。在下面的代码中，我使用了input事件，并且没有使用内联事件处理程序，而是使用了函数addEventListener() (know why)。

​

const productCountInput = document.querySelector('#productCount');
const productPriceInput = document.querySelector('#normalPrice');
const totalPriceInput = document.querySelector('#total');

function updateTotalPrice() {
  totalPriceInput.value = (parseFloat(productCountInput.value) * parseFloat(productPriceInput.value)) || 0;
}

productCountInput.addEventListener('input', updateTotalPrice);
productPriceInput.addEventListener('input', updateTotalPrice);

<table id="productTable" class="layui-table">
  <thead>
    <tr>
      <th>No.</th>
      <th>PART NUMBER</th>
      <th>DESCRIPTION</th>
      <th>QTY(PCS)</th>
      <th>UNIT PRICE (USD)</th>
      <th>AMOUNT(USD)</th>
      <th>OPRATION</th>
    </tr>
  </thead>
  <tbody id="columns">
    <tr style="display:none">
      <td>1</td>
      <td><input type="hidden" name="numberList"></td>
      <td><input type="hidden" name="remarkList"></td>
      <td><input type="hidden" name="countList"></td>
      <td><input type="hidden" name="priceList"></td>
      <td><input type="hidden" name="totalPriceList"></td>
    </tr>
    <tr th:each="orderProduct:${orderProducts}">
      <td th:text="${orderProducts.indexOf(orderProduct)+1}"></td>
      <td contenteditable="true">
        <input type="text" name="numberList" class="layui-input number" th:value="${orderProduct.number}">
      </td>
      <td contenteditable="true">
        <input type="text" name="remarkList" class="layui-input remark" th:value="${orderProduct.remark}">
      </td>
      <td id="productCoun" contenteditable="true">
        <input id="productCount" type="text" name="countList" class="layui-input count" th:value="${orderProduct.count}">
      </td>
      <td id="normalPric" contenteditable="true">
        <input id="normalPrice" type="text" name="priceList" class="layui-input price" th:value="${orderProduct.price}">
      </td>
      <td id="totalPric" th:text="${orderProduct.price}*${orderProduct.count}">
        <input id="total" type="text" name="totalPriceList" class="layui-input price" th:text="${orderProduct.price}*${orderProduct.count}">
      </td>
      <td>
        <a href="" class="EditBtn">Edit</a>
        <a href="javascript:void(0)" class="delBtn redType">Del</a>
      </td>
    </tr>
  </tbody>
</table>

​