如何在 keyup 上从 javascript 添加发票数据，并将总税额和总计添加到输入值中，以便我可以插入它而无需在 php 中计算？

问题描述 投票：0回答：1

我想要实现的是，当我动态计算输入字段中的数据时，我还想计算税收、总计和总计。 现在我想通过使用输入 HTML 标签来实现此目的，以便我可以在数据库中插入数据和计算字段。 这是我的 JS 代码：

在这里，我想要实现的正是在输入中显示小计、增值税和总计。

我是 JS 和 jQuery 的新手。 提前感谢您的帮助

$(function()
{
    $('#add').click(function() {
        addRows();
    });
    $('body').delegate('.remove','click',function() {
        $(this).parent().parent().remove();
    });
    $('body').delegate('.quantity,.price','keyup',function() {
        var tr=$(this).parent().parent();
        var qty=tr.find('.quantity').val();
        var price=tr.find('.price').val();

        var amt =(qty * price);
        tr.find('.amount').val(amt);
        total();

        var vat= (amt * 16/100);
        tr.find('.vat').val(vat);
        vat();
    });
});

//testing calculations
function total() {
    var tfoot=$(this).parent().parent();
    var totals=tfoot.find('.total').val();
    var totals=0;
    $('.amount').each(function(i,e) {
        var amt =$(this).val()-0;
        totals+=amt;
        //'<th><input type="text" class="total" name="total[]"></th>';
    });
    $('.total').html(totals);
}

function addRows(){
    var n=($('.detail tr').length-0)+1;
    var tr = '<tr>'+
        '<td class="no">'+n+'</td>'+
        '<td><textarea class="productname" name="productname[]" id="" cols="50" rows="3" ></textarea></td>'+
        '<td><input  type="text" id="quantit"  name="quantity[]" class="quantity" maxlength="8"></td>'+
        '<td><input type="text" class="price" name="price[]"></td>'+
        '<td><input type="text" class="amount" name="amount[]"></td>'+
        '</tr>';
    $('.detail').append(tr);
}

function deleteRows(){
    var table = document.getElementById('emptbl');
    var rowCount = table.rows.length;
    if(rowCount > '4'){
        var row = table.deleteRow(rowCount-4);
        rowCount--;
    } else{
        alert('All fields are removed');
    }
}
*{
    padding: 0px;
    margin: 0px;
    font-weight: bolder;
    font-family: 'bahnschrift', Courier, monospace;
    letter-spacing: 1px;
    color:  #a5a4a4;
}

.structure{
    display: grid;
    grid-template-columns: 1fr  3fr;
    grid-template-areas:
    "header header header"
    "aside main main"
    "footer footer footer";
    gap: 10px;
    padding: 4em;
}
header{
    grid-area: header;
    padding: 5px;
}
h1{
    text-transform: uppercase;
}
main{
    grid-area: main;
    padding: 5px;
}
aside{
    grid-area: aside;
    padding: 5px;
}
footer{
    grid-area: footer;
    padding: 5px;
}
.container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
}
.card {
    box-shadow:
    0 2.8px 2.2px rgba(0, 0, 0, 0.034),
    0 6.7px 5.3px rgba(0, 0, 0, 0.048),
    0 12.5px 10px rgba(0, 0, 0, 0.06),
    0 22.3px 17.9px rgba(0, 0, 0, 0.072),
    0 41.8px 33.4px rgba(0, 0, 0, 0.086),
    0 100px 80px rgba(0, 0, 0, 0.12)
  ;
    margin: auto 0px;
    padding: 50px;
    background: white;
    border-radius: 5px;
  }
  a {
    text-decoration: none;
    text-transform: uppercase;
    font-size: 22px;
    color:  #a5a4a4;
  }

  body {
    background: #EEF2F7;
  }
  footer{
    position: sticky;
  }
  /*aside design begins */
  a .sidebar{
    box-shadow:
    0 2.8px 2.2px rgba(0, 0, 0, 0.034),
    0 6.7px 5.3px rgba(0, 0, 0, 0.048),
    0 12.5px 10px rgba(0, 0, 0, 0.06),
    0 22.3px 17.9px rgba(0, 0, 0, 0.072),
    0 41.8px 33.4px rgba(0, 0, 0, 0.086),
    0 100px 80px rgba(0, 0, 0, 0.12)
  ;
    margin: auto 0px;
    margin-top: 5px;
    padding: 20px;
    margin: 10px;
    background: white;
    border-radius: 5px;
    font-size: 16px;
  }
   img{
    width: 10%;
    object-fit: cover;
  }
  .form_container{
    width: 90%;
    margin: 50px auto;
    box-shadow:
    0 2.8px 2.2px rgba(0, 0, 0, 0.034),
    0 6.7px 5.3px rgba(0, 0, 0, 0.048),
    0 12.5px 10px rgba(0, 0, 0, 0.06),
    0 22.3px 17.9px rgba(0, 0, 0, 0.072),
    0 41.8px 33.4px rgba(0, 0, 0, 0.086),
    0 100px 80px rgba(0, 0, 0, 0.12)
  ;
    margin: auto 0px;
    margin-top: 5px;
    padding: 20px;
    margin: 10px;
    background: white;
    border-radius: 5px;
  }
  .form-group{
    padding: .5em;
}
#form-btn{
  padding: .5em;
}
label{
  font-size: 22px;
  text-transform: capitalize;
}
.form-group input{
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    outline: none;
    outline-color: #a5a4a4;
}
.form-group input[type="text"]{
    font-size: 22px;
    text-transform: capitalize;
    appearance: none;

}
.form-group input[type="email"]{
    font-size: 22px;
}
.form-group .btn{
    background: #EEF2F7;
    padding: 10px;
    cursor: pointer;
    box-shadow:
    0 2.8px 2.2px rgba(0, 0, 0, 0.034),
    0 6.7px 5.3px rgba(0, 0, 0, 0.048),
    0 12.5px 10px rgba(0, 0, 0, 0.06),
    0 22.3px 17.9px rgba(0, 0, 0, 0.072),
    0 41.8px 33.4px rgba(0, 0, 0, 0.086),
    0 100px 80px rgba(0, 0, 0, 0.12)
  ;
  font-size: 20px;
  border-style: none;
  border-radius: 5px;
}

#form-btn #btn{
  background: #EEF2F7;
  padding: 10px;
  margin: 7px 7px;
  margin-left: -7px;
  cursor: pointer;
  box-shadow:
  0 2.8px 2.2px rgba(0, 0, 0, 0.034),
  0 6.7px 5.3px rgba(0, 0, 0, 0.048),
  0 12.5px 10px rgba(0, 0, 0, 0.06),
  0 22.3px 17.9px rgba(0, 0, 0, 0.072),
  0 41.8px 33.4px rgba(0, 0, 0, 0.086),
  0 100px 80px rgba(0, 0, 0, 0.12)
;
font-size: 20px;
border-style: none;
border-radius: 5px;
}
/**table structure begin**/
table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 auto;
}
th, td{
  border: 1px solid #EEF2F7;
  text-align: center;
  box-shadow:
  0 2.8px 2.2px rgba(0, 0, 0, 0.034),
  0 6.7px 5.3px rgba(0, 0, 0, 0.048),
  0 12.5px 10px rgba(0, 0, 0, 0.06),
  0 22.3px 17.9px rgba(0, 0, 0, 0.072),
  0 41.8px 33.4px rgba(0, 0, 0, 0.086),
  0 100px 80px rgba(0, 0, 0, 0.12)
;
}
th {
  background-color: #080f36;
  font-size: 17px;
  color:#fff;
  font-weight: bold;
}
td{
  padding: 1px;
}
td input{
  color: black !important;
  outline-style: none;
  font-size: 16px;
}
td textarea{
  outline-style: none;
  font-size: 16px;
  height: 40px;
}
td .serial{
  padding: 4px;
  width: 20%;
  text-transform: capitalize;
  text-align: left !important;
}
td .desc textarea{
  text-transform: capitalize;
  text-align: left !important;
}
td .quantity{
  padding: 8px;
  width: 60%;
  text-transform: capitalize;
  text-align: left !important;
}

td .price{
  padding: 8px;
  width: 80%;
  text-transform: capitalize;
  text-align: left !important;
}
td .amount{
  padding: 8px;
  font-size: 16px;
  width: 54%;
  text-transform: capitalize;
  text-align: left !important;
}
.form-left input{
  border-radius: 10px;
  padding: 5px  5px;
  outline-style: none;
  font-size: 16px;
  width: 100%;
  margin-bottom: 3px;

}
.right-side{
  width: 40%;
}
.right-side h1{
  text-transform: uppercase;
}
.form-right input{
  border-radius: 10px;
  padding: 5px  5px;
  outline-style: none;
  font-size: 16px;
  width: 100%;
  margin-bottom: 3px;

}
.form-right textarea{
  border-radius: 10px;
  font-size: 16px;
}
.inovlogo{
  width: 70%;
  padding: 3em;
  border-radius: 20px;
}
.inovlogo img{
  width:66%;
  margin: auto 0;
  margin-bottom: 20px;
}
.two{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:20px;
  padding: 8px;
}
#col0{
  border-style: none;
}
#col1{
  border-style: none;
}
#col2{
  border-style: none;
}
#col3{
  width: 10%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<?php  include ('../include/header.php'); ?>
<main>
<div  style="width: 210mm; height: 297mm" id="printDiv" class="form_container">
    <form action="" method="post"  class="field">
        <div class="two">
            <div class="inovlogo">
                <img src="img/logo/logo.png" alt="" srcset="">
            </div>
            <!-- Start header info -->
            <div class="company-info">
                <h1>invoice</h1>
                    <div class="form-left">
                        <input type="text" value="" placeholder="Company name">
                </div>
                <div class="form-left">
                    <input type="text" value="" placeholder="Tpin">
                </div>
                <div class="form-left">
                    <input type="text" value="" placeholder="Address">
                </div>
                <div class="form-left">
                    <input type="text" value="" placeholder="Email">
                </div>
                <div class="form-left">
                    <input type="text" value="<?php $currentDate = date('l, F j, Y'); echo $currentDate; ?>">
                </div>
                <div class="form-left">
                    <input type="text" value="<?php echo 'INVOICE NO :'. 0001; ?>">
                </div>
            </div>
            <!--  header info Ends-->
        </div>


        <!-- User data starts -->
        <div class="right-side">
            Bill to:
            <div class="form-right">
                <textarea name="address[]" id="" cols="40" rows="3" ></textarea>
            </div>
        </div>
        <!-- User data starts -->
    <div id="form-btn">
            <button  id="btn" type="button" onclick="addRows()" >&plus; Add</button>
            <button  id="btn" type="button" onclick="deleteRows()">&minus; remove</button>
        </div>
        <table  id="emptbl">
            <tr>
                <th>s/n</th>
                <th>Description</th>
                <th>Quantity</th>
                <th>Unit Price</th>
                <th>Amount</th>
            </tr>
            <tbody class="detail">
            <tr>
                <div class="inputfield">
                    <td class="no">1</td>
                    <td ><textarea name="productname[]" class="productname" id="" cols="50" rows="3" ></textarea></td>
                    <td ><input id="quantit"  name="quantity[]" class="quantity" type="text" maxlength="8"></td>
                    <td ><input id="prices"  name="price[]" class="price" type="text"></td>
                    <td ><input  name="amount[]" class="amount" type="text"  ></td>
                </div>
            </tr>
            </tbody>
            <tfoot>
                    <th  id="col0"></th>
                    <th  id="col1"></th>
                    <th  id="col2"></th>
                    <th  id="col3">Total</th>
                    <th  style="text-align:center;" >K<b class="total"></b></th>

            </tfoot>
            <tfoot>
                    <th  id="col0"></th>
                    <th  id="col1"></th>
                    <th  id="col2"></th>
                    <th  id="col3">Sub Total</th>
                    <th  style="text-align:center;" ><input id="prices"  name="item_total[]" class="vat" type="text"></th>

            </tfoot>
            <tfoot>
                <tr>
                <th  id="col0"></th>
                    <th  id="col1"></th>
                    <th  id="col2"></th>
                    <th  id="col3">Vat</th>
                    <td ><input id="prices"  name="item_total[]" class="price" type="text"></td>
                </tr>
            </tfoot>
     
        </table>
        <div id="form-btn">
            <button  id="btn" type="submit">&plus; Save</button>
            <button type="button" id="doPrint">&plus;Print</button>
        </div>
    </form>
</div>
</main>
<aside>
    <?php  include ('../include/side.php'); ?>
</aside>

<?php  include ('../include/footer.php'); ?>

<script>
document.getElementById("doPrint").addEventListener("click", function() {
     var printContents = document.getElementById('printDiv').innerHTML;
     var originalContents = document.body.innerHTML;
     document.body.innerHTML = printContents;
     window.print();
     document.body.innerHTML = originalContents;
});
</script>

javascript php jquery mysql pdo
1个回答
0
投票

您不太可能希望小计和增值税 (VAT) 的输入具有相同的名称 (

item_total[]
) 和 ID (
prices
)。在有效的 HTML 中，id 必须是唯一的。

让我们将这些输入更新为：

<input id="subtotal" name="subtotal" type="text">
<input id="vat" name="vat" type="text">

接下来，对于我们的 

.quantity, .price
委托 
keyup
处理程序，我们将添加逻辑来计算小计、增值税和总计，然后更新相应的输入/文本元素：

let subtotal = 0;
$('input[name="amount[]"]').each(function () {
  subtotal += Number($(this).val()) || 0;
});
    
const vat =  subtotal * 16 / 100;
const total = subtotal + vat;
    
$('input[name="subtotal"]').val(subtotal);   
$('input[name="vat"]').val(vat);
$('.total').text(total);


$(function() {
  $('#add').click(function() {
    addRows();
  });
  $('body').delegate('.remove', 'click', function() {
    $(this).parent().parent().remove();
  });
  
  $('body').delegate('.quantity, .price', 'keyup', function() {
    var tr = $(this).parent().parent();
    var qty = tr.find('.quantity').val();
    var price = tr.find('.price').val();
    
    var amt = (qty * price);
    tr.find('.amount').val(amt);
    
    // calculate totals
    let subtotal = 0;
    $('input[name="amount[]"]').each(function () {
        subtotal += Number($(this).val()) || 0;
    });
    
    const vat =  subtotal * 16 / 100;
    const total = subtotal + vat;
    
        $('input[name="subtotal"]').val(subtotal);   
    $('input[name="vat"]').val(vat);
    $('.total').text(total);
  });
});

//testing calculations
function total() {
  var tfoot = $(this).parent().parent();
  var totals = tfoot.find('.total').val();
  var totals = 0;
  $('.amount').each(function(i, e) {
    var amt = $(this).val() - 0;
    totals += amt;
    //'<th><input type="text" class="total" name="total[]"></th>';
  });
  $('.total').html(totals);
}

function addRows() {
  var n = ($('.detail tr').length - 0) + 1;
  var tr = '<tr>' +
    '<td class="no">' + n + '</td>' +
    '<td><textarea class="productname" name="productname[]" id="" cols="50" rows="3" ></textarea></td>' +
    '<td><input  type="text" id="quantit"  name="quantity[]" class="quantity" maxlength="8"></td>' +
    '<td><input type="text" class="price" name="price[]"></td>' +
    '<td><input type="text" class="amount" name="amount[]"></td>' +
    '</tr>';
  $('.detail').append(tr);
}

function deleteRows() {
  var table = document.getElementById('emptbl');
  var rowCount = table.rows.length;
  if (rowCount > '4') {
    var row = table.deleteRow(rowCount - 4);
    rowCount--;
  } else {
    alert('All fields are removed');
  }
}
* {
  padding: 0px;
  margin: 0px;
  font-weight: bolder;
  font-family: 'bahnschrift', Courier, monospace;
  letter-spacing: 1px;
  color: #a5a4a4;
}

.structure {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-areas:
    "header header header"
    "aside main main"
    "footer footer footer";
  gap: 10px;
  padding: 4em;
}

header {
  grid-area: header;
  padding: 5px;
}

h1 {
  text-transform: uppercase;
}

main {
  grid-area: main;
  padding: 5px;
}

aside {
  grid-area: aside;
  padding: 5px;
}

footer {
  grid-area: footer;
  padding: 5px;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 20px;
}

.card {
  box-shadow:
    0 2.8px 2.2px rgba(0, 0, 0, 0.034),
    0 6.7px 5.3px rgba(0, 0, 0, 0.048),
    0 12.5px 10px rgba(0, 0, 0, 0.06),
    0 22.3px 17.9px rgba(0, 0, 0, 0.072),
    0 41.8px 33.4px rgba(0, 0, 0, 0.086),
    0 100px 80px rgba(0, 0, 0, 0.12);
  margin: auto 0px;
  padding: 50px;
  background: white;
  border-radius: 5px;
}

a {
  text-decoration: none;
  text-transform: uppercase;
  font-size: 22px;
  color: #a5a4a4;
}

body {
  background: #EEF2F7;
}

footer {
  position: sticky;
}

/*aside design begins */
a .sidebar {
  box-shadow:
    0 2.8px 2.2px rgba(0, 0, 0, 0.034),
    0 6.7px 5.3px rgba(0, 0, 0, 0.048),
    0 12.5px 10px rgba(0, 0, 0, 0.06),
    0 22.3px 17.9px rgba(0, 0, 0, 0.072),
    0 41.8px 33.4px rgba(0, 0, 0, 0.086),
    0 100px 80px rgba(0, 0, 0, 0.12);
  margin: auto 0px;
  margin-top: 5px;
  padding: 20px;
  margin: 10px;
  background: white;
  border-radius: 5px;
  font-size: 16px;
}

img {
  width: 10%;
  object-fit: cover;
}

.form_container {
  width: 90%;
  margin: 50px auto;
  box-shadow:
    0 2.8px 2.2px rgba(0, 0, 0, 0.034),
    0 6.7px 5.3px rgba(0, 0, 0, 0.048),
    0 12.5px 10px rgba(0, 0, 0, 0.06),
    0 22.3px 17.9px rgba(0, 0, 0, 0.072),
    0 41.8px 33.4px rgba(0, 0, 0, 0.086),
    0 100px 80px rgba(0, 0, 0, 0.12);
  margin: auto 0px;
  margin-top: 5px;
  padding: 20px;
  margin: 10px;
  background: white;
  border-radius: 5px;
}

.form-group {
  padding: .5em;
}

#form-btn {
  padding: .5em;
}

label {
  font-size: 22px;
  text-transform: capitalize;
}

.form-group input {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  outline: none;
  outline-color: #a5a4a4;
}

.form-group input[type="text"] {
  font-size: 22px;
  text-transform: capitalize;
  appearance: none;

}

.form-group input[type="email"] {
  font-size: 22px;
}

.form-group .btn {
  background: #EEF2F7;
  padding: 10px;
  cursor: pointer;
  box-shadow:
    0 2.8px 2.2px rgba(0, 0, 0, 0.034),
    0 6.7px 5.3px rgba(0, 0, 0, 0.048),
    0 12.5px 10px rgba(0, 0, 0, 0.06),
    0 22.3px 17.9px rgba(0, 0, 0, 0.072),
    0 41.8px 33.4px rgba(0, 0, 0, 0.086),
    0 100px 80px rgba(0, 0, 0, 0.12);
  font-size: 20px;
  border-style: none;
  border-radius: 5px;
}

#form-btn #btn {
  background: #EEF2F7;
  padding: 10px;
  margin: 7px 7px;
  margin-left: -7px;
  cursor: pointer;
  box-shadow:
    0 2.8px 2.2px rgba(0, 0, 0, 0.034),
    0 6.7px 5.3px rgba(0, 0, 0, 0.048),
    0 12.5px 10px rgba(0, 0, 0, 0.06),
    0 22.3px 17.9px rgba(0, 0, 0, 0.072),
    0 41.8px 33.4px rgba(0, 0, 0, 0.086),
    0 100px 80px rgba(0, 0, 0, 0.12);
  font-size: 20px;
  border-style: none;
  border-radius: 5px;
}

/**table structure begin**/
table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 auto;
}

th,
td {
  border: 1px solid #EEF2F7;
  text-align: center;
  box-shadow:
    0 2.8px 2.2px rgba(0, 0, 0, 0.034),
    0 6.7px 5.3px rgba(0, 0, 0, 0.048),
    0 12.5px 10px rgba(0, 0, 0, 0.06),
    0 22.3px 17.9px rgba(0, 0, 0, 0.072),
    0 41.8px 33.4px rgba(0, 0, 0, 0.086),
    0 100px 80px rgba(0, 0, 0, 0.12);
}

th {
  background-color: #080f36;
  font-size: 17px;
  color: #fff;
  font-weight: bold;
}

td {
  padding: 1px;
}

td input {
  color: black !important;
  outline-style: none;
  font-size: 16px;
}

td textarea {
  outline-style: none;
  font-size: 16px;
  height: 40px;
}

td .serial {
  padding: 4px;
  width: 20%;
  text-transform: capitalize;
  text-align: left !important;
}

td .desc textarea {
  text-transform: capitalize;
  text-align: left !important;
}

td .quantity {
  padding: 8px;
  width: 60%;
  text-transform: capitalize;
  text-align: left !important;
}

td .price {
  padding: 8px;
  width: 80%;
  text-transform: capitalize;
  text-align: left !important;
}

td .amount {
  padding: 8px;
  font-size: 16px;
  width: 54%;
  text-transform: capitalize;
  text-align: left !important;
}

.form-left input {
  border-radius: 10px;
  padding: 5px 5px;
  outline-style: none;
  font-size: 16px;
  width: 100%;
  margin-bottom: 3px;

}

.right-side {
  width: 40%;
}

.right-side h1 {
  text-transform: uppercase;
}

.form-right input {
  border-radius: 10px;
  padding: 5px 5px;
  outline-style: none;
  font-size: 16px;
  width: 100%;
  margin-bottom: 3px;

}

.form-right textarea {
  border-radius: 10px;
  font-size: 16px;
}

.inovlogo {
  width: 70%;
  padding: 3em;
  border-radius: 20px;
}

.inovlogo img {
  width: 66%;
  margin: auto 0;
  margin-bottom: 20px;
}

.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 8px;
}

#col0 {
  border-style: none;
}

#col1 {
  border-style: none;
}

#col2 {
  border-style: none;
}

#col3 {
  width: 10%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
  <div style="width: 210mm; height: 297mm" id="printDiv" class="form_container">
    <form action="" method="post" class="field">
      <div class="two">
        <div class="inovlogo">
          <img src="img/logo/logo.png" alt="" srcset="">
        </div>
        <!-- Start header info -->
        <div class="company-info">
          <h1>invoice</h1>
          <div class="form-left">
            <input type="text" value="" placeholder="Company name">
          </div>
          <div class="form-left">
            <input type="text" value="" placeholder="Tpin">
          </div>
          <div class="form-left">
            <input type="text" value="" placeholder="Address">
          </div>
          <div class="form-left">
            <input type="text" value="" placeholder="Email">
          </div>
          <div class="form-left">
            <input type="text" value="$currentDate">
          </div>
          <div class="form-left">
            <input type="text" value="INVOICE NO">
          </div>
        </div>
        <!--  header info Ends-->
      </div>


      <!-- User data starts -->
      <div class="right-side">
        Bill to:
        <div class="form-right">
          <textarea name="address[]" id="" cols="40" rows="3"></textarea>
        </div>
      </div>
      <!-- User data starts -->
      <div id="form-btn">
        <button id="btn" type="button" onclick="addRows()">&plus; Add</button>
        <button id="btn" type="button" onclick="deleteRows()">&minus; remove</button>
      </div>
      <table id="emptbl">
        <tr>
          <th>s/n</th>
          <th>Description</th>
          <th>Quantity</th>
          <th>Unit Price</th>
          <th>Amount</th>
        </tr>
        <tbody class="detail">
          <tr>
            <div class="inputfield">
              <td class="no">1</td>
              <td><textarea name="productname[]" class="productname" id="" cols="50" rows="3"></textarea></td>
              <td><input id="quantit" name="quantity[]" class="quantity" type="text" maxlength="8"></td>
              <td><input id="prices" name="price[]" class="price" type="text"></td>
              <td><input name="amount[]" class="amount" type="text"></td>
            </div>
          </tr>
        </tbody>
        <tfoot>
          <th id="col0"></th>
          <th id="col1"></th>
          <th id="col2"></th>
          <th id="col3">Total</th>
          <th style="text-align:center;">K<b class="total"></b></th>

        </tfoot>
        <tfoot>
          <th id="col0"></th>
          <th id="col1"></th>
          <th id="col2"></th>
          <th id="col3">Sub Total</th>
          <th style="text-align:center;"><input id="subtotal" name="subtotal" class="vat" type="text"></th>

        </tfoot>
        <tfoot>
          <tr>
            <th id="col0"></th>
            <th id="col1"></th>
            <th id="col2"></th>
            <th id="col3">Vat</th>
            <td><input id="vat" name="vat" class="price" type="text"></td>
          </tr>
        </tfoot>

      </table>
      <div id="form-btn">
        <button id="btn" type="submit">&plus; Save</button>
        <button type="button" id="doPrint">&plus;Print</button>
      </div>
    </form>
  </div>
</main>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.