//代码格式正确，对我来说没有问题，我希望它对您有用。
我只需要添加5％固定的增值税（税额）即可，我希望它仅在税额上显示在行中，然后在总税额中包括所有税额和最终总额全部，谢谢。
$(document).ready(function(){
$('#addrow').click(function(){
$('.item-row:last').after('<tr class="item-row"><td class="item-name"><div class="delete-wpr"><textarea>Item Name</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td><td><textarea class="cost">0</textarea></td><td><textarea class="qty">0</textarea></td><td><textarea class="vat 5%">0</textarea></td><td><span class="price">0</span></td> </tr>')
bind();
})
bind() ;
function bind(){
$('.cost').blur(update_price);
$('.qty').blur(update_price);
}
function update_price(){
var row = $(this).parents('.item-row');
var cost = row.find('.cost').val();
var qty = row.find('.qty').val();
row.find('.price').html(Number(qty) * Number(cost) );
update_total()
}
function update_total(){
var total = 0 ;
$('.price').each(function(i){
price = $(this).html();
if(price > 0){
total += Number(price);
}
})
$('#subtotal').html(total);
$('#total').html(total);
}
$('.delete').live('click',function(){
$(this).parents('.item-row').remove();
update_total() ;
})
})* { margin: 0; padding: 0; }
body { font: 14px/1.4 Georgia, serif; }
#page-wrap { width: 800px; margin: 0 auto; }
textarea { border: 0; font: 14px Georgia, Serif; overflow: hidden; resize: none; }
table { border-collapse: collapse; }
table td, table th { border: 1px solid black; padding: 5px; }
#header { height: 15px; width: 100%; margin: 20px 0; background: #222; text-align: center; color: white; font: bold 15px Helvetica, Sans-Serif; text-decoration: uppercase; letter-spacing: 20px; padding: 8px 0px; }
#address { width: 250px; height: 150px; float: left; }
#customer { overflow: hidden; }
#logo { text-align: right; float: right; position: relative; margin-top: 25px; border: 1px solid #fff; max-width: 540px; max-height: 100px; overflow: hidden; }
#logo:hover, #logo.edit { border: 1px solid #000; margin-top: 0px; max-height: 125px; }
#logoctr { display: none; }
#logo:hover #logoctr, #logo.edit #logoctr { display: block; text-align: right; line-height: 25px; background: #eee; padding: 0 5px; }
#logohelp { text-align: left; display: none; font-style: italic; padding: 10px 5px;}
#logohelp input { margin-bottom: 5px; }
.edit #logohelp { display: block; }
.edit #save-logo, .edit #cancel-logo { display: inline; }
.edit #image, #save-logo, #cancel-logo, .edit #change-logo, .edit #delete-logo { display: none; }
#customer-title { font-size: 20px; font-weight: bold; float: left; }
#meta { margin-top: 1px; width: 300px; float: right; }
#meta td { text-align: right; }
#meta td.meta-head { text-align: left; background: #eee; }
#meta td textarea { width: 100%; height: 20px; text-align: right; }
#items { clear: both; width: 100%; margin: 30px 0 0 0; border: 1px solid black; }
#items th { background: #eee; }
#items textarea { width: 80px; height: 50px; }
#items tr.item-row td { border: 0; vertical-align: top; }
#items td.description { width: 300px; }
#items td.item-name { width: 175px; }
#items td.description textarea, #items td.item-name textarea { width: 100%; }
#items td.total-line { border-right: 0; text-align: right; }
#items td.total-value { border-left: 0; padding: 10px; }
#items td.total-value textarea { height: 20px; background: none; }
#items td.balance { background: #eee; }
#items td.blank { border: 0; }
#terms { text-align: center; margin: 20px 0 0 0; }
#terms h5 { text-transform: uppercase; font: 13px Helvetica, Sans-Serif; letter-spacing: 10px; border-bottom: 1px solid black; padding: 0 0 8px 0; margin: 0 0 8px 0; }
#terms textarea { width: 100%; text-align: center;}
textarea:hover, textarea:focus, #items td.total-value textarea:hover, #items td.total-value textarea:focus, .delete:hover { background-color:#EEFF88; }
.delete-wpr { position: relative; }
.delete { display: block; color: #000; text-decoration: none; position: absolute; background: #EEEEEE; font-weight: bold; padding: 0px 3px; border: 1px solid; top: -6px; left: -22px; font-family: Verdana; font-size: 12px; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!DOCTYPE html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<title>Invoice</title>
<link rel='stylesheet' type='text/css' href='css/style.css' />
<script type='text/javascript' src='js/jquery-1.3.2.min.js'></script>
<script type='text/javascript' src='js/custom.js'></script>
</head>
<body>
<div id="page-wrap">
<textarea id="header">INVOICE</textarea>
<div id="identity">
<textarea id="address">
text
text
</textarea>
</div>
<div style="clear:both"></div>
<div id="customer">
<table id="meta">
<tr>
<td class="meta-head">Invoice #</td>
<td><input type="number" ></td>
</tr>
<tr>
<th><label for="start"> date:</label></th>
<th><input type="date" id="start" name="trip-start"
value="2018-07-22"
min="2018-01-01" max="2030-12-31"></th>
</tr>
</table>
</div>
<table id="items">
<tr>
<th>unit </th>
<th>Unit Cost</th>
<th>Quantity</th>
<th>VAT 5%</th>
<th>Price</th>
</tr>
<tr class="item-row">
<td class="item-name"><div class="delete-wpr"><textarea>Web Updates</textarea><a class="delete" href="javascript:;" title="Remove row">x</a></div></td>
<td><textarea class="cost">0.00</textarea></td>
<td><textarea class="qty">1</textarea></td>
<td><textarea class="VAT">0.00</textarea></td>
<td><span class="price">0.00</span></td>
</tr>
<tr id="hiderow">
<td colspan="5"><a id="addrow" href="javascript:;" title="Add a row">+</a></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Subtotal</td>
<td class="total-value"><div id="subtotal">0.00</div></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="tax-line">tax</td>
<td class="tax-value"><div id="tax">0.00</div></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Total</td>
<td class="total-value"><div id="total">0.00</div></td>
</tr>
</table>
<div id="terms">
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
可能是，我认为您想计算税额并将其添加到总计中。
我认为这可行。
$(document).ready(function(){
$('#addrow').click(function(){
$('.item-row:last').after('<tr class="item-row"><td class="item-name"><div class="delete-wpr"><textarea>Item Name</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td><td><textarea class="cost">0</textarea></td><td><textarea class="qty">0</textarea></td><td><textarea class="vat 5%">0</textarea></td><td><span class="price">0</span></td> </tr>')
bind();
})
bind() ;
function bind(){
$('.cost').blur(update_price);
$('.qty').blur(update_price);
}
function update_price(){
var row = $(this).parents('.item-row');
var cost = row.find('.cost').val();
var qty = row.find('.qty').val();
row.find('.price').html(Number(qty) * Number(cost) );
update_total()
}
function update_total(){
var total = 0 ;
$('.price').each(function(i){
price = $(this).html();
if(price > 0){
total += Number(price);
}
})
var tax = total * 0.05;
$('#subtotal').html(total);
$('#tax').html(tax);
$('#total').html(total+tax);
}
$('.delete').live('click',function(){
$(this).parents('.item-row').remove();
update_total() ;
})
})* { margin: 0; padding: 0; }
body { font: 14px/1.4 Georgia, serif; }
#page-wrap { width: 800px; margin: 0 auto; }
textarea { border: 0; font: 14px Georgia, Serif; overflow: hidden; resize: none; }
table { border-collapse: collapse; }
table td, table th { border: 1px solid black; padding: 5px; }
#header { height: 15px; width: 100%; margin: 20px 0; background: #222; text-align: center; color: white; font: bold 15px Helvetica, Sans-Serif; text-decoration: uppercase; letter-spacing: 20px; padding: 8px 0px; }
#address { width: 250px; height: 150px; float: left; }
#customer { overflow: hidden; }
#logo { text-align: right; float: right; position: relative; margin-top: 25px; border: 1px solid #fff; max-width: 540px; max-height: 100px; overflow: hidden; }
#logo:hover, #logo.edit { border: 1px solid #000; margin-top: 0px; max-height: 125px; }
#logoctr { display: none; }
#logo:hover #logoctr, #logo.edit #logoctr { display: block; text-align: right; line-height: 25px; background: #eee; padding: 0 5px; }
#logohelp { text-align: left; display: none; font-style: italic; padding: 10px 5px;}
#logohelp input { margin-bottom: 5px; }
.edit #logohelp { display: block; }
.edit #save-logo, .edit #cancel-logo { display: inline; }
.edit #image, #save-logo, #cancel-logo, .edit #change-logo, .edit #delete-logo { display: none; }
#customer-title { font-size: 20px; font-weight: bold; float: left; }
#meta { margin-top: 1px; width: 300px; float: right; }
#meta td { text-align: right; }
#meta td.meta-head { text-align: left; background: #eee; }
#meta td textarea { width: 100%; height: 20px; text-align: right; }
#items { clear: both; width: 100%; margin: 30px 0 0 0; border: 1px solid black; }
#items th { background: #eee; }
#items textarea { width: 80px; height: 50px; }
#items tr.item-row td { border: 0; vertical-align: top; }
#items td.description { width: 300px; }
#items td.item-name { width: 175px; }
#items td.description textarea, #items td.item-name textarea { width: 100%; }
#items td.total-line { border-right: 0; text-align: right; }
#items td.total-value { border-left: 0; padding: 10px; }
#items td.total-value textarea { height: 20px; background: none; }
#items td.balance { background: #eee; }
#items td.blank { border: 0; }
#terms { text-align: center; margin: 20px 0 0 0; }
#terms h5 { text-transform: uppercase; font: 13px Helvetica, Sans-Serif; letter-spacing: 10px; border-bottom: 1px solid black; padding: 0 0 8px 0; margin: 0 0 8px 0; }
#terms textarea { width: 100%; text-align: center;}
textarea:hover, textarea:focus, #items td.total-value textarea:hover, #items td.total-value textarea:focus, .delete:hover { background-color:#EEFF88; }
.delete-wpr { position: relative; }
.delete { display: block; color: #000; text-decoration: none; position: absolute; background: #EEEEEE; font-weight: bold; padding: 0px 3px; border: 1px solid; top: -6px; left: -22px; font-family: Verdana; font-size: 12px; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!DOCTYPE html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<title>Invoice</title>
<link rel='stylesheet' type='text/css' href='css/style.css' />
<script type='text/javascript' src='js/jquery-1.3.2.min.js'></script>
<script type='text/javascript' src='js/custom.js'></script>
</head>
<body>
<div id="page-wrap">
<textarea id="header">INVOICE</textarea>
<div id="identity">
<textarea id="address">
text
text
</textarea>
</div>
<div style="clear:both"></div>
<div id="customer">
<table id="meta">
<tr>
<td class="meta-head">Invoice #</td>
<td><input type="number" ></td>
</tr>
<tr>
<th><label for="start"> date:</label></th>
<th><input type="date" id="start" name="trip-start"
value="2018-07-22"
min="2018-01-01" max="2030-12-31"></th>
</tr>
</table>
</div>
<table id="items">
<tr>
<th>unit </th>
<th>Unit Cost</th>
<th>Quantity</th>
<th>VAT 5%</th>
<th>Price</th>
</tr>
<tr class="item-row">
<td class="item-name"><div class="delete-wpr"><textarea>Web Updates</textarea><a class="delete" href="javascript:;" title="Remove row">x</a></div></td>
<td><textarea class="cost">0.00</textarea></td>
<td><textarea class="qty">1</textarea></td>
<td><textarea class="VAT">0.00</textarea></td>
<td><span class="price">0.00</span></td>
</tr>
<tr id="hiderow">
<td colspan="5"><a id="addrow" href="javascript:;" title="Add a row">+</a></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Subtotal</td>
<td class="total-value"><div id="subtotal">0.00</div></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="tax-line">tax</td>
<td class="tax-value"><div id="tax">0.00</div></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Total</td>
<td class="total-value"><div id="total">0.00</div></td>
</tr>
</table>
<div id="terms">
</div>
</div>
</body>
</html>