显示从原始html发票到另一html发票的一些输入

Question

我在这里有此HTML发票，我要添加的内容很好，当我在发票中输入数据并打印时，我希望该文件为我打开另一个文件，该文件包含原始文件中的固定数据，并且仅包含发票编号，单位和数量。 这样做的目的是获得一个单独的文件，以显示给Devilry驱动程序确认。

$(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>
<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>