jQuery发票如何形成并删除按钮的添加方式

时间：2017-10-29 22:29:36

标签： javascript jquery html css

我目前正在为自己制作动态发票系统。但我不能使它正常工作。

我想在此表单中添加删除按钮，但我不能这样做。

我在HTML中有这样的发票表：

$('#addRow').click(function () {
    addItem();
});
$('#items_table').on('keyup', '.update', function () {
    var key = event.keyCode || event.charCode; // if the user hit del or backspace, dont do anything
    if( key == 8 || key == 46 ) return false;
    calculateTotals();
});
$('#taxPercentage').change(function () {
    calculateTotals(); // user changed tax percentage, recalculate everything
});

function calculateTotals(){
    
    // get all of the various input typs from the rows 
    // each will be any array of elements
    var nameElements = $('.row-name');
    var quantityElements = $('.row-quantity');
    var taxElements = $('.row-tax');
    var priceElements = $('.row-price');
    var totalElements = $('.row-total');
    
    // get the bottom table elements
    var taxPercentageElement =$('#taxPercentage');
    var subTotalElement =$('#subTotal');
    var totalTaxElement =$('#totalTax');
    var grandTotalElement =$('#grandTotal');

    var subTotal=0;
    var taxTotal=0;
    var grandTotal=0;
    $(quantityElements).each(function(i,e){
        
        // get all the elements for the current row
        var nameElement = $('.row-name:eq(' + i + ')');
        var quantityElement = $('.row-quantity:eq(' + i + ')');
        var taxElement = $('.row-tax:eq(' + i + ')');
        var priceElement = $('.row-price:eq(' + i + ')');
        var totalElement = $('.row-total:eq(' + i + ')');

        // get the needed values from this row
        var qty = quantityElement.val().trim().replace(/[^0-9$.,]/g, ''); // filter out non digits like letters
            qty = qty == '' ? 0 : qty; // if blank default to 0
            quantityElement.val(qty); // set the value back, in case we had to remove soemthing
        var price = priceElement.val().trim().replace(/[^0-9$.,]/g, '');
            price = price == '' ? 0 : price; // if blank default to 0
            priceElement.val(price); // set the value back, in case we had to remove soemthing
    
        // get/set row tax and total
        // also add to our totals for later
        var rowPrice = (price * 1000) * qty
            subTotal = subTotal + rowPrice;
        var tax = taxPercentageElement.val() * rowPrice;
            taxElement.val((tax / 1000).toFixed(2));
            taxTotal = taxTotal + tax;
        var total =   rowPrice + tax
            totalElement.val((total / 1000).toFixed(2));
            grandTotal = grandTotal + total;
    });
    
    // set the bottom table values
    subTotalElement.val((subTotal / 1000).toFixed(2));   
    totalTaxElement.val((taxTotal / 1000).toFixed(2));  
    grandTotalElement.val((grandTotal / 1000).toFixed(2));   
}
function addItem() {
    var itemRow =
        '<tr>' +
        '<td><input type="text" class="form-control row-name" placeholder="Item name" /></td>' +
        '<td><input type="text" class="form-control update row-quantity" placeholder="Quantity" /></td>' +
        '<td><input type="text" class="form-control update row-tax" placeholder="Tax" /></td>' +
        '<td><input type="text" class="form-control update row-price" placeholder="Price" /></td>' +
        '<td><input type="text" class="form-control row-total" disabled placeholder="0,00" /></td>' +
        '</tr>';
    $("#items_table").append(itemRow);
}
addItem(); //call function on load to add the first item
button{
    font-size:18px;
    
}
.myTable {
    background-color:#ffaa56;
}
.myTable {
    border-collapse: collapse;
    border-spacing: 0;
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
}
.myTable tr:last-child td:last-child {
    -moz-border-radius-bottomright:0px;
    -webkit-border-bottom-right-radius:0px;
    border-bottom-right-radius:0px;
}
.myTable tr:first-child td:first-child {
    -moz-border-radius-topleft:0px;
    -webkit-border-top-left-radius:0px;
    border-top-left-radius:0px;
}
.myTable tr:first-child td:last-child {
    -moz-border-radius-topright:0px;
    -webkit-border-top-right-radius:0px;
    border-top-right-radius:0px;
}
.myTable tr:last-child td:first-child {
    -moz-border-radius-bottomleft:0px;
    -webkit-border-bottom-left-radius:0px;
    border-bottom-left-radius:0px;
}
.myTable tr:hover td {
}
#items_table tr:nth-child(odd) {
    background-color:#ffffff;
}
#items_table tr:nth-child(even) {
    background-color:#ffd0a3;
}
.myTable td {
    vertical-align:middle;
    border:1px solid #000000;
    border-width:0px 1px 1px 0px;
    text-align:left;
    padding:7px;
    font-size:10px;
    font-family:Arial;
    font-weight:normal;
    color:#000000;
}
.myTable tr:last-child td {
    border-width:0px 1px 0px 0px;
}
.myTable tr td:last-child {
    border-width:0px 0px 1px 0px;
}
.myTable tr:last-child td:last-child {
    border-width:0px 0px 0px 0px;
}

html page
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button id="addRow">Add a row</button><br><br>
<table class="myTable">
    <thead>
        <tr>
            <th>Item Name</th>
            <th>Quantity</th>
            <th>Tax</th>
            <th>Price</th>
            <th>Total</th>
        </tr>
    </thead>
    <tbody id="items_table"></tbody>
    <tfoot>
        <tr>
            <th>Item Name</th>
            <th>Quantity</th>
            <th>Tax</th>
            <th>Price</th>
            <th>Total</th>
        </tr>
    </tfoot>
</table>
<br>
    <br>
<table class="myTable" style="width:70%">
    <thead>
        <tr>
            <th>Tax Percentage</th>
            <th>Sub Total</th>
            <th>Total Tax</th>
            <th>Grand Total</th>
        </tr>
    </thead>
    <tbody id="items_table">
        
        
        <tr>
            <td>
                <select name="" id="taxPercentage" class="form-control">
                    <option value=".10">10%</option>
                    <option value=".15">15%</option>
                </select>
            <td><input type="text" class="form-control" id="subTotal" disabled placeholder="0,00" /></td>
            <td><input type="text" class="form-control" id="totalTax" disabled placeholder="0,00" /></td>
            <td><input type="text" class="form-control" id="grandTotal" disabled placeholder="0,00" /></td>
        </tr>
        
    </tbody>
    <tfoot>
    </tfoot>
</table>

我目前对如何正确执行此操作缺乏想法。所以，我需要的只是一旦我填写了1个项目行，税收就会在添加的总表中得到，一旦我在该行中更改了税，它也会在下面更改，并且价格也必须更改。

有人能让我走上正轨吗？

2 个答案:

答案 0 :(得分：0)

  

我想在此表单中添加删除按钮，但我不能这样做

这里的关键是要了解事件处理程序通常只能在设置时设置在页面上的元素上。您的代码失败是因为您动态添加行 - 当您尝试分配事件处理程序时它们不存在。但是，jQuery为我们提供了on() function的特殊形式，涵盖了我们在这种情况下所需的内容：

$('already present parent element selector').on("click", "existing/added later element selector", function () {
    //code
});

因此，为了解决您的问题，您的代码应如下所示：

$('body').on("click", "#delRow", function () {
    delItem($(this));
});
function delItem(elem) {
   elem.parents("tr").remove();
   calculateTotals();
}

请注意，您必须在#delRow函数中添加addItem()按钮，并在标记中添加相应的<th>单元格。

关于整个事情，我还会禁用税务单元，因为如果用户可以编辑税单，那么它是没有意义的，因为税额是由下面的百分比值（10％或15％）定义的。税收通常由政府征收。并提前知道。我的意思是你不能只支付5.745632％而不是法律规定的15％。

我还发现了一个小问题：当我删除price单元格中的符号时，更新不会被执行，相关的单元格也会被执行。价值观不会相应改变。您可能希望了解MDN上的input事件。

一般情况下，如果我理解你的想法，它就可以正常工作：

＆＃13;
＆＃13; 
$('#addRow').on("click", function () {
    addItem();
});
$('body').on("click", "#delRow", function () {
    delItem($(this));
});
$('#items_table').on('input', '.update', function () {
    var key = event.keyCode || event.charCode; // if the user hit del or backspace, dont do anything
    if( key == 8 || key == 46 ) return false;
    calculateTotals();
});
$('#taxPercentage').change(function () {
    calculateTotals(); // user changed tax percentage, recalculate everything
});

function calculateTotals(){
    
    // get all of the various input typs from the rows 
    // each will be any array of elements
    var nameElements = $('.row-name');
    var quantityElements = $('.row-quantity');
    var taxElements = $('.row-tax');
    var priceElements = $('.row-price');
    var totalElements = $('.row-total');
    
    // get the bottom table elements
    var taxPercentageElement =$('#taxPercentage');
    var subTotalElement =$('#subTotal');
    var totalTaxElement =$('#totalTax');
    var grandTotalElement =$('#grandTotal');

    var subTotal=0;
    var taxTotal=0;
    var grandTotal=0;
    $(quantityElements).each(function(i,e){
        
        // get all the elements for the current row
        var nameElement = $('.row-name:eq(' + i + ')');
        var quantityElement = $('.row-quantity:eq(' + i + ')');
        var taxElement = $('.row-tax:eq(' + i + ')');
        var priceElement = $('.row-price:eq(' + i + ')');
        var totalElement = $('.row-total:eq(' + i + ')');

        // get the needed values from this row
        var qty = quantityElement.val().trim().replace(/[^0-9$.,]/g, ''); // filter out non digits like letters
            qty = qty == '' ? 0 : qty; // if blank default to 0
            quantityElement.val(qty); // set the value back, in case we had to remove soemthing
        var price = priceElement.val().trim().replace(/[^0-9$.,]/g, '');
            price = price == '' ? 0 : price; // if blank default to 0
            priceElement.val(price); // set the value back, in case we had to remove soemthing
    
        // get/set row tax and total
        // also add to our totals for later
        var rowPrice = (price * 1000) * qty
            subTotal = subTotal + rowPrice;
        var tax = taxPercentageElement.val() * rowPrice;
            taxElement.val((tax / 1000).toFixed(2));
            taxTotal = taxTotal + tax;
        var total =   rowPrice + tax
            totalElement.val((total / 1000).toFixed(2));
            grandTotal = grandTotal + total;
    });
    
    // set the bottom table values
    subTotalElement.val((subTotal / 1000).toFixed(2));   
    totalTaxElement.val((taxTotal / 1000).toFixed(2));  
    grandTotalElement.val((grandTotal / 1000).toFixed(2));   
}
function delItem(elem) {
   elem.parents("tr").remove();
   calculateTotals();
}
function addItem() {
    var itemRow =
        '<tr>' +
        '<td><button id="delRow">Delete</button></td><td><input type="text" class="form-control row-name" placeholder="Item name" /></td>' +
        '<td><input type="text" class="form-control update row-quantity" placeholder="Quantity" /></td>' +
        '<td><input type="text" disabled class="form-control update row-tax" placeholder="Tax" /></td>' +
        '<td><input type="text" class="form-control update row-price" placeholder="Price" /></td>' +
        '<td><input type="text" class="form-control row-total" disabled placeholder="0,00" /></td>' +
        '</tr>';
    $("#items_table").append(itemRow);
}
addItem(); //call function on load to add the first item
＆＃13; 
button{
    font-size:18px;
    
}
.myTable {
    background-color:#ffaa56;
}
.myTable {
    border-collapse: collapse;
    border-spacing: 0;
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
}
.myTable tr:last-child td:last-child {
    -moz-border-radius-bottomright:0px;
    -webkit-border-bottom-right-radius:0px;
    border-bottom-right-radius:0px;
}
.myTable tr:first-child td:first-child {
    -moz-border-radius-topleft:0px;
    -webkit-border-top-left-radius:0px;
    border-top-left-radius:0px;
}
.myTable tr:first-child td:last-child {
    -moz-border-radius-topright:0px;
    -webkit-border-top-right-radius:0px;
    border-top-right-radius:0px;
}
.myTable tr:last-child td:first-child {
    -moz-border-radius-bottomleft:0px;
    -webkit-border-bottom-left-radius:0px;
    border-bottom-left-radius:0px;
}
.myTable tr:hover td {
}
#items_table tr:nth-child(odd) {
    background-color:#ffffff;
}
#items_table tr:nth-child(even) {
    background-color:#ffd0a3;
}
.myTable td {
    vertical-align:middle;
    border:1px solid #000000;
    border-width:0px 1px 1px 0px;
    text-align:left;
    padding:7px;
    font-size:10px;
    font-family:Arial;
    font-weight:normal;
    color:#000000;
}
.myTable tr:last-child td {
    border-width:0px 1px 0px 0px;
}
.myTable tr td:last-child {
    border-width:0px 0px 1px 0px;
}
.myTable tr:last-child td:last-child {
    border-width:0px 0px 0px 0px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="addRow">Add a row</button><br><br>
<table class="myTable">
    <thead>
        <tr><th>Delete</th>
            <th>Item Name</th>
            <th>Quantity</th>
            <th>Tax</th>
            <th>Price per unit</th>
            <th>Total</th>
        </tr>
    </thead>
    <tbody id="items_table"></tbody>
    <tfoot>
        <tr><th>Delete</th>
            <th>Item Name</th>
            <th>Quantity</th>
            <th>Tax</th>
            <th>Price per unit</th>
            <th>Total</th>
        </tr>
    </tfoot>
</table>
<br>
    <br>
<table class="myTable" style="width:70%">
    <thead>
        <tr>
            <th>Tax Percentage</th>
            <th>Sub Total</th>
            <th>Total Tax</th>
            <th>Grand Total</th>
        </tr>
    </thead>
    <tbody id="items_table">
        
        
        <tr>
            <td>
                <select name="" id="taxPercentage" class="form-control">
                    <option value=".10">10%</option>
                    <option value=".15">15%</option>
                </select>
            <td><input type="text" class="form-control" id="subTotal" disabled placeholder="0,00" /></td>
            <td><input type="text" class="form-control" id="totalTax" disabled placeholder="0,00" /></td>
            <td><input type="text" class="form-control" id="grandTotal" disabled placeholder="0,00" /></td>
        </tr>
        
    </tbody>
    <tfoot>
    </tfoot>
</table>
＆＃13;
＆＃13;
＆＃13;

至于您的其他问题 - 您可以选择一个区域设置，将数字视为您所在国家/地区格式的货币。可以通过toLocaleString()：

完成

＆＃13;
＆＃13; 
var num1 = 145636,
    num2 = 145636;

console.log(num1.toLocaleString('en-US', {style: 'currency', currency: 'USD'})); // US format - 145,636
console.log(num2.toLocaleString('en-IN', {style: 'currency', currency: 'INR'})); // Indian format - 1,45,636
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

如何将我写入的数字分成逗号？

示例：

1500

1,456,36

相关问题
最新问题