合計を計算できず、テーブルの行を追加/削除できません

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が必要です。だからあなたはあなたのプロジェクトにそれを含めるのを忘れてしまったのか、間違ってしまったのでしょうか。あなたは自分のHTMLにこのスクリプトを追加することにより、CDNから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>