Question

我遇到以下JavaScript代码的问题。它有一个错误警告表示表值未定义。我正在尝试通过计算price * qty来更新每一行的小计。

function updateSubtotal() {
       var subTotal = 0;
       var tables = document.getElementsByTagName("table").rows;
       var r = this.parentNode.parentNode.rowIndex;
       var j = document.getElementsByTagName(".price").cellIndex;
       var s = document.getElementsByTagName(".subtotal").cellIndex;
       var price = tables[r].cells[j].value;
       var quantity = document.getElementsByTagName("input").value;
       var subAmount = price * quantity;
       subTotal += Number(subAmount);
       // set total for the row
       document.getElementsByTagName('table').rows[r].cells[s].innerHTML = '$' + subTotal.toFixed(2);
       }
     updateTotal();
}

我尝试更新的原始代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


    window.onload = setupCart;

    function setupCart() {
      var qtyInputs = document.querySelectorAll( 'input' );
      for ( var i = 0; i < qtyInputs.length; i++ ) {
        qtyInputs[ i ].oninput = updateSubtotal;
      }
      updateTotal();
    }



    function updateTotal() {
      var total = 0;
      var subTotals = document.querySelectorAll( '.subtotal' );
      for ( var i = 0; i < subTotals.length; i++ ) {
        var amount = subTotals[ i ].innerHTML.match( /[0-9]+.[0-9]+/ );
        total += Number( amount );
      }
      document.querySelector( '#total' ).innerHTML = '$' + total.toFixed( 2 );
    }
  </script>
</head>
<body>


  ><table>
    ><tr>
      ><th>Description</th>
      ><th>Each</th>
      ><th>Qty</th>
      ><th>subtotal</th>
    ></tr>

    <tr class="item">
      <td class="description"><a href=""><img src="red-shirt.jpg" alt="" />Red Crew Neck T-Shirt</a></td>
      <td class="price">$15.00</td>
      <td><input type="number" value="1" min="0" /></td>
      <td class="subtotal">$15.00</td>
    </tr>

    <tr class="item">
      <td class="description"><a href=""><img src="tropical-shirt.jpg" alt="" />Blue Tropical Floral Print T-Shirt</a></td>
      <td class="price">$25.00</td>
      <td><input type="number" value="1" min="0" /></td>
      <td class="subtotal">$25.00</td>
    </tr>

    <tr class="item">
      <td class="description"><a href=""><img src="black-sneakers.jpg" alt="" />Black Canvas Lace Up Sneakers</a></td>
      <td class="price">$35.00</td>
      <td><input type="number" value="1" min="0" /></td>
      <td class="subtotal">$35.00</td>
    </tr>

    <tr class="item">
      <td class="description"><a href=""><img src="black-grey-jacket.jpg" alt="" />Black and Grey Hooded Jacket</a></td>
      <td class="price">$40.00</td>
      <td><input type="number" value="1" min="0" /></td>
      <td class="subtotal">$40.00</td>
    </tr>

    <tr class="item">
      <td class="description"><a href=""><img src="black-sunglasses.jpg" alt="" />Black Retro Sunglasses</a></td>
      <td class="price">$15.00</td>
      <td><input type="number" value="1" min="0" /></td>
      <td class="subtotal">$15.00</td>
    </tr>

    <tr class="cart-summary">
      <td></td>
      <td></td>
      <th>Total:</th>
      <td id="total"></td>
    </tr>

  </table>



</body>
</html>

Answer 1

.getElementsByTagName()函数返回一个NodeList对象。如果您想要页面上的第一个<table>，则可以使用

document.getElementsByTagName("table")[0].rows ...

最好在函数开始时只获取一次：

var table = document.getElementsByTagName("table")[0];

避免重新遍历DOM。

Answer 2

也许是因为document.getElementsByTagName不返回元素而是返回元素列表...您必须访问所需的节点，如此document.getElementsByTagName（“table”）[0] .rows

用于更新购物车小计的JavaScript

2 个答案: