JQuery发票税计算

Question

＆＃13;

＆＃13;

function print_today() {
  var now = new Date();
  var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();
  var months = new Array('Januari','Februari','Maart','April','Mei','Juni','Juli','Augustus','September','Oktober','November','December');
  function fourdigits(number) {
    return (number < 1000) ? number + 1900 : number;
  }
  var today =  date + " " + months[now.getMonth()] + " " + (fourdigits(now.getYear()));
  return today;
}

// from http://www.mediacollege.com/internet/javascript/number/round.html
function roundNumber(number,decimals) {
  var newString;// The new rounded number
  decimals = Number(decimals);
  if (decimals < 1) {
    newString = (Math.round(number)).toString();
  } else {
    var numString = number.toString();
    if (numString.lastIndexOf(".") == -1) {// If there is no decimal point
      numString += ".";// give it one at the end
    }
    var cutoff = numString.lastIndexOf(".") + decimals;// The point at which to truncate the number
    var d1 = Number(numString.substring(cutoff,cutoff+1));// The value of the last decimal place that we'll end up with
    var d2 = Number(numString.substring(cutoff+1,cutoff+2));// The next decimal, after the last one we want
    if (d2 >= 5) {// Do we need to round up at all? If not, the string will just be truncated
      if (d1 == 9 && cutoff > 0) {// If the last digit is 9, find a new cutoff point
        while (cutoff > 0 && (d1 == 9 || isNaN(d1))) {
          if (d1 != ".") {
            cutoff -= 1;
            d1 = Number(numString.substring(cutoff,cutoff+1));
          } else {
            cutoff -= 1;
          }
        }
      }
      d1 += 1;
    } 
    if (d1 == 10) {
      numString = numString.substring(0, numString.lastIndexOf("."));
      var roundedNum = Number(numString) + 1;
      newString = roundedNum.toString() + '.';
    } else {
      newString = numString.substring(0,cutoff) + d1.toString();
    }
  }
  if (newString.lastIndexOf(".") == -1) {// Do this again, to the new string
    newString += ".";
  }
  var decs = (newString.substring(newString.lastIndexOf(".")+1)).length;
  for(var i=0;i<decimals-decs;i++) newString += "0";
  //var newNumber = Number(newString);// make it a number if you like
  return newString; // Output the result to the form field (change for your purposes)
}


function update_btw(){
	var percentage = parseInt($("#Btw option:selected" ).val());
	$(".cost").html("" + percentage);
}


function update_total(){
  var subtotal = 0;
  var NewBtw = 0;
  var Totaal = 0;
  $('.price').each(function(i){
    price = $(this).html().replace("&euro;","");
    if (!isNaN(price)) subtotal += Number(price);
  });

 subtotal = parseFloat(roundNumber(subtotal,2));
 NewBtw = roundNumber(NewBtw,2);
 Totaal = roundNumber(Totaal,2);

 $('.ExclPrice').html("&euro;"+subtotal);
   
 var percentage = parseInt($('.btw').val());
 NewBtw = parseFloat(subtotal * (percentage / 100));
 Totaal = parseFloat(subtotal + NewBtw);
 
 $('.price').html("&euro;"+Totaal);

 $('#total').html("&euro;"+Totaal);  
   
  update_balance();
}


function update_balance() {
  var due = $("#total").html();
  due = roundNumber(due,2);

  $('.due').html("&euro;"+due);

  
}

function update_price() {
  var row = $(this).parents('.item-row');
  var price = row.find('.cost').val().replace("$","") * row.find('.qty').val();
  price = roundNumber(price,2);
  isNaN(price) ? row.find('.price').html("N/A") : row.find('.price').html(""+price);
  
  update_total();
}

function bind() {
  $(".cost").blur(update_price);
  $(".qty").blur(update_price);
}

$(document).ready(function() {

  $('input').click(function(){
    $(this).select();
  });

  $("#paid").blur(update_balance);
   
  $("#addrow").click(function(){
    $(".item-row:last").after('<tr class="item-row"><td class="item-name"><div class="delete-wpr"><textarea>Product</textarea><a class="delete" href="javascript:;" title="Verwijder">X</a></div></td><td class="description"><textarea>Omschrijving</textarea></td><td><textarea class="cost">0</textarea></td><td><textarea class="qty">0</textarea></td><td><span class="ExclPrice">650,00</span></td><td><textarea class="btw">0%</textarea></td><td><span class="price">0</span></td></tr>');
    if ($(".delete").length > 0) $(".delete").show();
    bind();
  });
  
  bind();
  
  $(".delete").live('click',function(){
    $(this).parents('.item-row').remove();
    update_total();
    if ($(".delete").length < 2) $(".delete").hide();
  });
  
  $("#cancel-logo").click(function(){
    $("#logo").removeClass('edit');
  });
  $("#delete-logo").click(function(){
    $("#logo").remove();
  });
  $("#change-logo").click(function(){
    $("#logo").addClass('edit');
    $("#imageloc").val($("#image").attr('src'));
    $("#image").select();
  });
  $("#save-logo").click(function(){
    $("#image").attr('src',$("#imageloc").val());
    $("#logo").removeClass('edit');
  });
  
  $("#date").val(print_today());
  
});

＆＃13;

* { margin: 0; padding: 0; }
body { font: 13px/1.4 Arial; }
#page-wrap { width: 800px; margin: 0 auto; }

textarea { border: 0; font: 13px Arial; 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: #F33F3F; text-align: center; color: white; font: bold 15px Helvetica, Sans-Serif; text-decoration: uppercase; letter-spacing: 20px; padding: 8px 0px; }

#address { position:absolute; top:200px; width: 250px; height: 150px; text-align:left;  float: left; }
#customer { overflow: hidden; }

#logo { text-align: right; float: left; 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; }


#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: 80px 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; }

＆＃13;

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

		
		<table id="items">
		
		  <tr>
		      <th>Product</th>
		      <th>Description</th>
		      <th>Price per qty</th>
		      <th>qty</th>
			  <th>Price no tax</th>
			  <th>Tax%</th>
		      <th>Price with tax</th>
		  </tr>
		  
		  <tr class="item-row">
		      <td class="item-name"><div class="delete-wpr"><textarea>Hardware</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>
		      <td class="description"><textarea>reperation</textarea></td>
		      <td><textarea class="cost">&euro;650,00</textarea></td>
		      <td><textarea class="qty">1</textarea></td>
			  <td><span class="ExclPrice">&euro;650,00</span></td>
			  <td><textarea class="btw">0%</textarea></td>
		      <td><span class="price">&euro;650,00</span></td>
		  </tr>
		  
		  <tr id="hiderow">
		    <td colspan="7"><a id="addrow" href="javascript:;" title="Add a row"><img src="../img/icons/icon-add-product.png"></a></td>
		  </tr>
		<tr>
		      <td colspan="2" class="blank"></td>
		      <td colspan="4" class="total-line">Totaal</td>
		      <td class="total-value"><div id="total"></div></td>
		  </tr>		  
		</table>
		
	

＆＃13;

＆＃13;

＆＃13;

大家好，当我想在我的html Jquery发票中计算税时，我遇到了问题。当我想在第二行中添加第二行时，问题就出现了，用户已将21％放入第二行，而在第二行中，第二行将计算21％。我还在链接中查看问题和代码。

＆＃13;

＆＃13;

function update_total() {
  var subtotal = 0;

  $('.price').each(function(i) {
    price = $(this).html().replace("€", "");
    if (!isNaN(price)) subtotal += Number(price);
  });

  subtotal = parseFloat(roundNumber(subtotal, 2));



  var percentage = parseInt($('.btw').val());

  var BtwPercentage = parseFloat(price * (percentage / 100));

  var InclBtw = parseFloat(price) + parseFloat(BtwPercentage);


  $('.ExclPrice').html("€" + subtotal);

  $('.price').html("€" + InclBtw);



  update_balance();
}


function update_balance() {
  var due = $("#total").html();
  due = roundNumber(due, 2);

  $('.due').html("€" + due);


}

function update_price() {
  var row = $(this).parents('.item-row');
  var price = row.find('.cost').val().replace("$", "") * row.find('.qty').val();
  price = roundNumber(price, 2);
  isNaN(price) ? row.find('.price').html("N/A") : row.find('.price').html("" + price);

  update_total();
}

function bind() {
  $(".cost").blur(update_price);
  $(".qty").blur(update_price);
}

$(document).ready(function() {

  $('input').click(function() {
    $(this).select();
  });

  $("#paid").blur(update_balance);

  $("#addrow").click(function() {
    $(".item-row:last").after('<tr class="item-row"><td class="item-name"><div class="delete-wpr"><textarea>Product</textarea><a class="delete" href="javascript:;" title="Verwijder">X</a></div></td><td class="description"><textarea>Omschrijving</textarea></td><td><textarea class="cost">0</textarea></td><td><textarea class="qty">0</textarea></td><td><span class="ExclPrice">650,00</span></td><td><textarea class="btw">0%</textarea></td><td><span class="price">0</span></td></tr>');
    if ($(".delete").length > 0) $(".delete").show();
    bind();
  });

  bind();

  $(".delete").live('click', function() {
    $(this).parents('.item-row').remove();
    update_total();
    if ($(".delete").length < 2) $(".delete").hide();
  });

  $("#cancel-logo").click(function() {
    $("#logo").removeClass('edit');
  });
  $("#delete-logo").click(function() {
    $("#logo").remove();
  });
  $("#change-logo").click(function() {
    $("#logo").addClass('edit');
    $("#imageloc").val($("#image").attr('src'));
    $("#image").select();
  });
  $("#save-logo").click(function() {
    $("#image").attr('src', $("#imageloc").val());
    $("#logo").removeClass('edit');
  });

  $("#date").val(print_today());

});

＆＃13;

        * {
          margin: 0;
          padding: 0;
        }
        body {
          font: 13px/1.4 Arial;
        }
        #page-wrap {
          width: 800px;
          margin: 0 auto;
        }
        textarea {
          border: 0;
          font: 13px Arial;
          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: #F33F3F;
          text-align: center;
          color: white;
          font: bold 15px Helvetica, Sans-Serif;
          text-decoration: uppercase;
          letter-spacing: 20px;
          padding: 8px 0px;
        }
        #address {
          position: absolute;
          top: 200px;
          width: 250px;
          height: 150px;
          text-align: left;
          float: left;
        }
        #customer {
          overflow: hidden;
        }
        #logo {
          text-align: right;
          float: left;
          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;
        }
        #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: 80px 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;
        }

＆＃13;

<div id="page-wrap">

  <textarea id="header">FC-IT</textarea>

  <div id="identity">

    <textarea id="address"></textarea>

    <div id="logo">

      <div id="logoctr">
        <a href="javascript:;" id="change-logo" title="Change logo">Change Logo</a>
        <a href="javascript:;" id="save-logo" title="Save changes">Save</a>
        |
        <a href="javascript:;" id="delete-logo" title="Delete logo">Delete Logo</a>
        <a href="javascript:;" id="cancel-logo" title="Cancel changes">Cancel</a>
      </div>

      <div id="logohelp">
        <input id="imageloc" type="text" size="50" value="" />
        <br />(max width: 540px, max height: 100px)
      </div>
      <img id="image" src="../img/Logo.png" alt="logo" />
    </div>

  </div>

  <div style="clear:both"></div>

  <div id="customer">
    <table id="meta">
      <tr>
        <td class="meta-head">Kvk</td>
        <td>
          <textarea></textarea>
        </td>
      </tr>
      <tr>
        <td class="meta-head">BTW nummer</td>
        <td>
          <textarea></textarea>
        </td>
      </tr>
      <tr>
        <td class="meta-head">Bankrekeningnummer</td>
        <td>
          <textarea></textarea>
        </td>
      </tr>
      <tr>
        <td class="meta-head">Invoice #</td>
        <td>
          <textarea>
            <?php $Datum=D ate( "Y"); $Teken="-" ; $num=1 ; echo $Datum, $Teken; printf( "%03d", $num);?>
          </textarea>
        </td>
      </tr>
      <tr>

        <td class="meta-head">Datum</td>
        <td>
          <textarea id="date">December 15, 2009</textarea>
        </td>
      </tr>

    </table>

  </div>

  <table id="items">

    <tr>
      <th>Product</th>
      <th>Decription</th>
      <th>Price per qty</th>
      <th>qty</th>
      <th>Price with no tax</th>
      <th>tax%</th>
      <th>Price with tax</th>
    </tr>

    <tr class="item-row">
      <td class="item-name">
        <div class="delete-wpr">
          <textarea>Hardware</textarea><a class="delete" href="javascript:;" title="Remove row">X</a>
        </div>
      </td>
      <td class="description">
        <textarea>Reperatie</textarea>
      </td>
      <td>
        <textarea class="cost">&euro;650,00</textarea>
      </td>
      <td>
        <textarea class="qty">1</textarea>
      </td>
      <td><span class="ExclPrice">&euro;650,00</span>
      </td>
      <td>
        <textarea class="btw">0%</textarea>
      </td>
      <td><span class="price">&euro;650,00</span>
      </td>
    </tr>

    <tr id="hiderow">
      <td colspan="7">
        <a id="addrow" href="javascript:;" title="Add a row">
          <img src="../img/icons/icon-add-product.png">
        </a>
      </td>
    </tr>
    <tr>
      <td colspan="2" class="blank"></td>
      <td colspan="4" class="total-line">Totaal</td>
      <td class="total-value">
        <div id="total"></div>
      </td>
    </tr>
  </table>

  <div id="terms">
    <h5><b></b></h5>
    <textarea>.</textarea>
  </div>

＆＃13;

＆＃13;

＆＃13;