我怎样才能替换div而不是tr和table?

时间:2015-06-21 03:32:47

标签: javascript jquery twitter-bootstrap

我如何添加" Div"代替 表& TR

我用div而不是Table和tr尝试了很多次 并失败了 我即将创建发票计算

如果有人知道这一点,请告诉我 谢谢



$(window).load(function(){
$(document).ready(function () {
    
    // copy customer details to shipping
    $('input.copy-input').on("change keyup paste", function () {
        var thisID = $(this).attr('id');
        $('input#' + thisID + "_ship").val($(this).val());
    });

    // add new product row on invoice
    var cloned = $('#invoice_table tr:last').clone();
    $(".add-row").click(function (e) {
        e.preventDefault();
        cloned.clone().appendTo('#invoice_table'); 
    });
    
    calculateTotal();
    
    $('#invoice_table').on('change keyup paste', '.calculate', function() {
        updateTotals(this);
        calculateTotal();
    });

	function updateTotals(elem) {
        var tr = $(elem).closest('tr'),
            quantity = $('[name="invoice_product_qty[]"]', tr).val(),
	        price = $('[name="invoice_product_price[]"]', tr).val(),
            percent = $('[name="invoice_product_discount[]"]', tr).val(),
	        subtotal = parseInt(quantity) * parseFloat(price);
        if(percent && $.isNumeric(percent) && percent !== 0){
            subtotal = subtotal - ((parseInt(percent) / 100) * subtotal);
        }
	    $('.calculate-sub', tr).val(subtotal.toFixed(2));
	}

	function calculateTotal(){
	    
	    var grandTotal = 0.0;
	    var totalQuantity = 0;
	    $('.calculate-sub').each(function(){
	        grandTotal += parseFloat($(this).val()) ;
	    });
	    
	    $('.invoice-sub-total').text(parseFloat(grandTotal ).toFixed(2) );  
	}
    
});
});//]]>  




1 个答案:

答案 0 :(得分:0)



$(window).load(function(){
$(document).ready(function () {
    
    // copy customer details to shipping
    $('input.copy-input').on("change keyup paste", function () {
        var thisID = $(this).attr('id');
        $('input#' + thisID + "_ship").val($(this).val());
    });

    // add new product row on invoice
    var cloned = $('#invoice_table tr:last').clone();
    $(".add-row").click(function (e) {
        e.preventDefault();
        cloned.clone().appendTo('#invoice_table'); 
    });
    
    calculateTotal();
    
    $('#invoice_table').on('change keyup paste', '.calculate', function() {
        updateTotals(this);
        calculateTotal();
    });

	function updateTotals(elem) {
        var tr = $(elem).closest('tr'),
            quantity = $('[name="invoice_product_qty[]"]', tr).val(),
	        price = $('[name="invoice_product_price[]"]', tr).val(),
            percent = $('[name="invoice_product_discount[]"]', tr).val(),
	        subtotal = parseInt(quantity) * parseFloat(price);
        if(percent && $.isNumeric(percent) && percent !== 0){
            subtotal = subtotal - ((parseInt(percent) / 100) * subtotal);
        }
	    $('.calculate-sub', tr).val(subtotal.toFixed(2));
	}

	function calculateTotal(){
	    
	    var grandTotal = 0.0;
	    var totalQuantity = 0;
	    $('.calculate-sub').each(function(){
	        grandTotal += parseFloat($(this).val()) ;
	    });
	    
	    $('.invoice-sub-total').text(parseFloat(grandTotal ).toFixed(2) );  
	}
    
});
});//]]>  

  <style type="text/css">
    body {
    padding: 2em 0;
}
.panel-body {
    padding: 15px 15px 0 15px;
}
}
.float-left {
    float: left !important;
}
.float-right {
    float: right !important;
}
.margin-bottom {
    margin-bottom: 1em;
}
.margin-top {
    margin-top: 1em;
}
/* Form validation */
 #response {
    margin: 0 1em 1em 1em;
}
  </style>
&#13;
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
  <h1>Create invoice</h1>
		<hr>

		<div class="row">
			<div class="col-xs-6 text-right">

		<table class="table table-bordered" id="invoice_table">

			<tbody>
				<tr>
					<td>
						<div class=" form-group">
							<select name="invoice_product[]">
								<option>Versa Table - Wildberry</option><option>Versa Table - Aubergine</option><option>Versa Table - Blue Jazz</option><option>Versa Table - Tundra Spring</option>							</select>
						</div>
					</td>
					<td>
						<div class=" form-group form-group-sm">
							<input class="form-control calculate" name="invoice_product_qty[]" value="1" type="text">
						</div>
					</td>
					<td>
						<div class="input-group input-group-sm">
							<span class="input-group-addon">£</span>
							<input class="form-control calculate" name="invoice_product_price[]" value="0.00" aria-describedby="sizing-addon1" type="text">
						</div>
					</td>
					<td>
						<div class=" form-group form-group-sm">
							<input class="form-control calculate" name="invoice_product_discount[]" placeholder="Enter % or value (ex: 10% or 10.50)" type="text">
						</div>
					</td>
					<td><div class=" form-group form-group-sm">
                         <div class="col-lg-2">
    <input type="text" name="sub_total" class="form-control calculate-sub" id="subtotal" value="0.00" aria-describedby="sizing-addon1" disabled>
   </div>
					</td>
				</tr>
			</tbody>
		</table>
		<div class="row text-right">
			<div class="col-xs-2 col-xs-offset-8">
				<p>
					<strong>
						Sub Total: <br>
													TAX/VAT: <br>
												Total: <br>
					</strong>
				</p>
			</div>
			<div class="col-xs-2">
					<strong>
						£<span class="invoice-sub-total">20.00</span> <br>
													£<span class="invoice-vat">0.00</span> <br>
												£<span class="invoice-total">0.00</span> <br>
					</strong>
			</div>
		</div>
  
&#13;
&#13;
&#13;