我有一个表单，我需要添加动态字段。 codeigniter形式的代码在
之下<?php echo form_open('admin/sales/create' , array('class' => 'form-horizontal form-groups-bordered validate','target'=>'_top'));?>
<div class="form-group">
<div class="col-sm-2">
<label>Date</label>
<input type="text" class="datepicker form-control" name="date" data-validation="date" data-validation-format="mm/dd/yyyy"/>
</div>
<div class="col-sm-2">
<label>Invoice No.</label>
<input type="text" class="form-control" name="invoice" data-validation="required" data-validation-error-msg="Required Field"/>
</div>
<div class="col-sm-3">
<label>Customer Name</label>
<input type="text" class="form-control" name="cname" value="Cash" data-validation="required" data-validation-error-msg="Required Field"/>
</div>
<div class="col-sm-2">
<label>Payment Received</label>
<input type="text" class="form-control" name="pay" data-validation="required" data-validation-error-msg="Required Field"/>
</div>
</div>
<div id="row0" class="form-group rows">
<div class="col-sm-4">
<label>Product Name</label>
<select name="pname[]" class="form-control">
<?php
$this->db->order_by('name','asc');
$students = $this->db->get('product')->result_array();
foreach($students as $row):
?>
<?php $qnty=$this->crud_model->count_products($row['prod_id']);?>
<option value="<?php echo $row['prod_id'];?>" <?php if($qnty==0) echo 'disabled'; ?> >
<?php echo ucwords($row['name']);?>
(Available Qnty = <?php echo $this->crud_model->count_products($row['prod_id']);?>)
(Average Price = <?php echo $this->crud_model->avg_price($row['prod_id']);?>)
</option>
<?php
endforeach;
?>
</select>
</div>
<div class="col-sm-4">
<label>Quantity (Should be less than Available Qnty)</label>
<input type="text" class="form-control" name="qnty[]" data-validation="required" data-validation-error-msg="Required Field" />
</div>
<div class="col-sm-2">
<label>Price / Unit</label>
<input type="text" class="form-control" name="price[]" data-validation="required" data-validation-error-msg="Required Field" />
</div>
<div class="col-sm-2">
<label>Subtotal</label>
<input type="text" class="form-control" name="tot[]" data-validation="required" data-validation-error-msg="Required Field" />
</div>
</div>
<a href="javascript:" onclick="hello();">Add Row</a>
<div class="form-group">
<div class="col-sm-6">
<button type="submit" class="btn btn-primary">Add Invoice</button>
</div>
</div>
</form>
单击Add row时，它将使用row0克隆div。现在我需要计算这些行的字段。 我的公式是
Qnty Price Subtotal
5 10 50
7 12 84
Grand total 134 (total of all subtotal)
我使用下面的函数来克隆行
function hello()
{
$("#row0").clone().insertAfter("div.rows:last");
var list = document.getElementsByClassName("rows");
for (var i = 1; i < list.length; i++) {
list[i].setAttribute("id", "row" + i);
}
}
感谢您使用ajax或任何方法的任何建议。
答案 0 :(得分：1)
PHP代码
<?php echo form_open('admin/sales/create' , array('class' => 'form-horizontal form-groups-bordered validate','target'=>'_top'));?>
<div class="form-group">
<div class="col-sm-2">
<label>Date</label>
<input type="text" class="datepicker form-control" name="date" data-validation="date" data-validation-format="mm/dd/yyyy"/>
</div>
<div class="col-sm-2">
<label>Invoice No.</label>
<input type="text" readonly class="form-control" value="<?php echo $this->crud_model->generate_invoice_number();?>" name="invoice" data-validation="required" data-validation-error-msg="Required Field"/>
</div>
<div class="col-sm-3">
<label>Customer Name</label>
<input type="text" class="form-control" name="cname" value="Cash" data-validation="required" data-validation-error-msg="Required Field"/>
</div>
</div>
<div class="table-responsive">
<table id="table-data" class="table table-bordered">
<thead>
<tr class="table_header">
<th>Product</th>
<th>Quantity</i></th>
<th class="text-right">Unit Price</th>
<th class="text-right">Sub-total <br/> (Tax Excl.)</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr id="new_item tr_clone">
<input type="hidden" name="invoice_id" value="" id="invoice_id">
<input type="hidden" name="item_id" value="">
<td style="width:40%"> <select id="pname.0" name="pname[]" class="form-control">
<?php
$this->db->order_by('name','asc');
$students = $this->db->get('product')->result_array();
foreach($students as $row):
?>
<?php $qnty=$this->crud_model->count_products($row['prod_id']);?>
<option value="<?php echo $row['prod_id'];?>" <?php if($qnty==0) echo 'disabled'; ?> >
<?php echo ucwords($row['name']);?>
(Available Qnty = <?php echo $this->crud_model->count_products($row['prod_id']);?>)
(Average Price = <?php echo $this->crud_model->avg_price($row['prod_id']);?>)
</option>
<?php
endforeach;
?>
</select></td>
<td style="width:10%"><input class="form-control" onchange="javascript:calc();" id="item_quantity.0" name="item_quantity" value=""/></td>
<td class="text-right" style="width:10%"><input class="form-control text-right" onchange="javascript:calc();" id="item_price.0" name="item_price" value=""/></td>
<td class="text-right" style="width:10%"><input class="form-control text-right" id="subtot.0" readonly name="item_sub_total" value=""/></td>
<td style="width:10%;"><input type="button" name="add" value="Add" class="addButton"><input type="button" name="remove" value="Remove" class="removebutton"></td>
</tr>
</table>
<table class="table table-bordered">
<tr class="text-right" id="invoice_total_row">
<td colspan="6" class="no-border">Sub Total:</td>
<td style="width:12%;" ><label><span id="items_total_cost"></span></label></td>
</tr>
<tr class="text-right">
<td colspan="6" class="no-border" style="vertical-align: middle">Paid Amount</td>
<td style="width:10%;" >
<input type="text" class="form-control text-right invoice_grand_total" name="invoice_discount_amount" onchange="javascript: calt();" id="paid"/>
</td>
</tr>
<tr class="text-right">
<td colspan="6" class="no-border "> Total Amount Due : </td>
<td class="invoice_amount_due"><label><span id="amount_due"></span></label></td>
</tr>
</tbody>
</table>
</div>
<div class="form-group">
<div class="col-sm-6">
<button type="submit" class="btn btn-primary">Add Invoice</button>
</div>
</div>
</form>
JavaScript代码 - ＆gt;您可以将其粘贴到与PHP页面相同的页面上
<script>
$(function(){
$("#table-data").on('click', 'input.addButton', function() {
var $tr = $(this).closest('tr');
var allTrs = $tr.closest('table').find('tr');
var lastTr = allTrs[allTrs.length-1];
var $clone = $(lastTr).clone();
$clone.find('td').each(function(){
var el = $(this).find(':first-child');
var id = el.attr('id') || null;
if(id) {
var i = id.substr(id.length-1);
var prefix = id.substr(0, (id.length-1));
el.attr('id', prefix+(+i+1));
el.attr('name', prefix+(+i+1));
}
});
$clone.find('input:text').val('');
$tr.closest('table').append($clone);
});
$("#table-data").on('change', 'select', function(){
var val = $(this).val();
$(this).closest('tr').find('input:text').val(val);
});
});
$(document).on('click', 'input.removebutton', function () {
$(this).closest('tr').remove();
return false;
});
</script>
<script>
function calc()
{
var total=0;
for( var i = 0; i < 30; i++ ) {
var qnty = document.getElementById("item_quantity." + i).value;
var price = document.getElementById("item_price." + i).value;
document.getElementById("subtot." + i).value=(qnty*price);
var subtot=(qnty*price);
total=total+subtot;
document.getElementById("items_total_cost").innerHTML=total;
}
}
function calt()
{
var total=document.getElementById("items_total_cost").innerHTML;
var paid=document.getElementById("paid").value;
ftotal=total-paid;
document.getElementById("amount_due").innerHTML='<i class="fa fa-inr" style="padding-right:5px;"></i>'+ftotal;
}
</script>