총계를 계산할 수없고 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가 필요합니다. 따라서 프로젝트에 포함 시키거나 잘못 입력하는 것을 잊어 버렸습니다. 당신은 당신의 HTML에이 스크립트를 추가하여 CDN에서 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>

: 그 모든 것을 증명하기 위해

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

가 jQuery로 잘 작동, 여기에 수입 jQuery를 사용하여 코드