無法計算總計並在html中添加/刪除表中的行

Question

我目前使用http://jsfiddle.net/QAa35/中的示例。 我試圖在我的Chrome/IE瀏覽器中運行代碼片段，但我無法獲得如小提琴中所示的結果。 以下是我在我的index.html，這是完全一樣的小提琴：

<table class="order-list"> 
    <thead> 
     <tr> 
      <td>Product</td> 
      <td>Price</td> 
      <td>Qty</td> 
      <td>Total</td> 
     </tr> 
    </thead>   
    <tbody> 
     <tr> 
      <td><input type="text" name="product" /></td> 
      <td>$<input type="text" name="price" /></td> 
      <td><input type="text" name="qty" /></td> 
      <td>$<input type="text" name="linetotal" readonly="readonly"/></td> 
      <td><a class="deleteRow"> x </a></td> 
     </tr> 
    </tbody> 

    <tfoot> 
     <tr> 
      <td colspan="5" style="text-align: center;"> 
       <input type="button" id="addrow" value="Add Product" /> 
      </td> 
     </tr> 

     <tr> 
      <td colspan="5"> 
       Grand Total: $<span id="grandtotal"></span> 
      </td> 
     </tr> 
    </tfoot> 
</table> 


<script> 
$(document).ready(function() { 
    var counter = 1; 

    $("#addrow").on("click", function() { 
     counter++; 

     var newRow = $("<tr>"); 
     var cols = ""; 
     cols += '<td><input type="text" name="product' + counter + '"/></td>'; 
     cols += '<td>$<input type="text" name="price' + counter + '"/></td>'; 
     cols += '<td><input type="text" name="qty' + counter + '"/></td>'; 
     cols += '<td>$<input type="text" name="linetotal' + counter + '" readonly="readonly"/></td>'; 
     cols += '<td><a class="deleteRow"> x </a></td>'; 
     newRow.append(cols); 

     $("table.order-list").append(newRow); 
    }); 

    $("table.order-list").on("change", 'input[name^="price"], input[name^="qty"]', function (event) { 
     calculateRow($(this).closest("tr")); 
     calculateGrandTotal(); 
    }); 

    $("table.order-list").on("click", "a.deleteRow", function (event) { 
     $(this).closest("tr").remove(); 
     calculateGrandTotal(); 
    }); 
}); 

function calculateRow(row) { 
    var price = +row.find('input[name^="price"]').val(); 
    var qty = +row.find('input[name^="qty"]').val(); 
    row.find('input[name^="linetotal"]').val((price * qty).toFixed(2)); 
} 

function calculateGrandTotal() { 
    var grandTotal = 0; 
    $("table.order-list").find('input[name^="linetotal"]').each(function() { 
     grandTotal += +$(this).val(); 
    }); 
    $("#grandtotal").text(grandTotal.toFixed(2)); 
} 
</script> 

但是，我無法得到總。我不能添加/刪除行： Screenshot of results

我該如何使它工作？

謝謝！

Answer 1

您的代碼需要jQuery。所以你只是忘了把它包含到你的項目中，或者做錯了。您可以從CDN剛剛加入這個腳本的HTML導入的jQuery：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

爲了證明一切工作正常使用jQuery，這裏是你的代碼與進口的jQuery：

$(document).ready(function() { 
 
    var counter = 1; 
 

 
    $("#addrow").on("click", function() { 
 
     counter++; 
 

 
     var newRow = $("<tr>"); 
 
     var cols = ""; 
 
     cols += '<td><input type="text" name="product' + counter + '"/></td>'; 
 
     cols += '<td>$<input type="text" name="price' + counter + '"/></td>'; 
 
     cols += '<td><input type="text" name="qty' + counter + '"/></td>'; 
 
     cols += '<td>$<input type="text" name="linetotal' + counter + '" readonly="readonly"/></td>'; 
 
     cols += '<td><a class="deleteRow"> x </a></td>'; 
 
     newRow.append(cols); 
 

 
     $("table.order-list").append(newRow); 
 
    }); 
 

 
    $("table.order-list").on("change", 'input[name^="price"], input[name^="qty"]', function (event) { 
 
     calculateRow($(this).closest("tr")); 
 
     calculateGrandTotal(); 
 
    }); 
 

 
    $("table.order-list").on("click", "a.deleteRow", function (event) { 
 
     $(this).closest("tr").remove(); 
 
     calculateGrandTotal(); 
 
    }); 
 
}); 
 

 
function calculateRow(row) { 
 
    var price = +row.find('input[name^="price"]').val(); 
 
    var qty = +row.find('input[name^="qty"]').val(); 
 
    row.find('input[name^="linetotal"]').val((price * qty).toFixed(2)); 
 
} 
 

 
function calculateGrandTotal() { 
 
    var grandTotal = 0; 
 
    $("table.order-list").find('input[name^="linetotal"]').each(function() { 
 
     grandTotal += +$(this).val(); 
 
    }); 
 
    $("#grandtotal").text(grandTotal.toFixed(2)); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="order-list"> 
 
    <thead> 
 
     <tr> 
 
      <td>Product</td> 
 
      <td>Price</td> 
 
      <td>Qty</td> 
 
      <td>Total</td> 
 
     </tr> 
 
    </thead>   
 
    <tbody> 
 
     <tr> 
 
      <td><input type="text" name="product" /></td> 
 
      <td>$<input type="text" name="price" /></td> 
 
      <td><input type="text" name="qty" /></td> 
 
      <td>$<input type="text" name="linetotal" readonly="readonly"/></td> 
 
      <td><a class="deleteRow"> x </a></td> 
 
     </tr> 
 
    </tbody> 
 

 
    <tfoot> 
 
     <tr> 
 
      <td colspan="5" style="text-align: center;"> 
 
       <input type="button" id="addrow" value="Add Product" /> 
 
      </td> 
 
     </tr> 
 

 
     <tr> 
 
      <td colspan="5"> 
 
       Grand Total: $<span id="grandtotal"></span> 
 
      </td> 
 
     </tr> 
 
    </tfoot> 
 
</table>