<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" >
<link rel="stylesheet" href="jquery-ui-1.9.2/themes/base/jquery.ui.all.css">
<script src="jquery-ui-1.9.2/jquery-1.8.3.js"></script>
<script src="jquery-ui-1.9.2/ui/jquery.ui.core.js"></script>
<script src="jquery-ui-1.9.2/ui/jquery.ui.widget.js"></script>
<script src="jquery-ui-1.9.2/ui/jquery.ui.datepicker.js"></script>
<link rel="stylesheet" href="jquery-ui-1.9.2/demos/demos.css">
<!-- data picker js code goes here -->
<!-- Add dynamic content your form js code goes here -->
<body>
<div style="margin:10%;" >
<table class="table table-list table-striped" style="width:40%;">
<thead>
<tr>
<th>S.No</th>
<th>Title</th>
<th>Cost</th>
<th>Date</th>
<th>Description</th>
<th>Net</th>
<th>Vat(%)</th>
<th>Gross</th>
</tr>
</thead>
<tbody id="row_div">
<tr>
<td>1</td>
<td><input type="text" id="title" class="input-medium" name="title" cost_class="title"/></td>
<td><input type="text" id="cos" class="input-medium" name="cost" cost_class="cost_type"/></td>
<td><input type="text" id="datepicker" class="date_Picker" name="date1" date_class="date_type"/></td>
<td><input type="text" id="des" class="test" name="description" description_class="description_type" /></td>
<td><input type="text" id="net" name="Net" class="num1" onchange="gross_amount()" ></td>
<td><input type="text" id="vat" name="Vat" class="num2" onchange="gross_amount()"></td>
<td><input type="text" id="gross" name="Gross" class="sum"></td>
</tr>
</tbody>
</table>
<div class="row" style="margin-left:20px;"><a href="javascript:add_tr();">Add</a> |
<a href="javascript:remove_tr();">Remove</a>
</div>
</div>
<script type="text/javascript">
$(function() {
$(document).on("click",".date_Picker",function(){
$(this).datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd-mm-yy'
}).datepicker("show");
});
});
var intTextBox=1;
//FUNCTION TO ADD File BOX ELEMENT
function add_tr()
{
if(intTextBox>0)
{
intTextBox = intTextBox + 1;
var contentID = document.getElementById('row_div');
var newtr = document.createElement('tr');
newtr.setAttribute('id','floorstrText'+intTextBox);
newtr.innerHTML = "<td>"+intTextBox+"</td><td><input type='text' id=title" + intTextBox + " name=title" + intTextBox + " class='input-medium' cost_class='cost_type'/></td><td><input type='text' id=cos" + intTextBox + " name=cost" + intTextBox + " class='input-medium' cost_class='cost_type'/></td><td><input name=date"+ intTextBox +" type='text' class='date_Picker input-medium' id=dat"+ intTextBox +" date_class='date_type'/></td><td><input type='text' id=des" + intTextBox + " name=des" + intTextBox + " description_class='description_type' /></td><td><input name=Net"+ intTextBox +" type='text' class='num2 key' id=net"+ intTextBox +" /></td><td><input name=Vat"+ intTextBox +" type='text' class='num2 key' id=dat"+ intTextBox +" /></td><td><input name=Gross"+ intTextBox +" type='text' class='sum' id=gross"+ intTextBox +"/></td>";
contentID.appendChild(newtr);
}
}
//FUNCTION TO REMOVE TEXT BOX ELEMENT
function remove_tr()
{
if(intTextBox != 0)
{
var contentID = document.getElementById('row_div');
contentID.removeChild(document.getElementById('floorstrText'+intTextBox));
intTextBox = intTextBox-1;
}
}
function gross_amount() {
var Net = parseInt(document.getElementById("net").value);
var Vat = parseInt(document.getElementById("vat").value);
var Gross = Net+((Vat*Net)/100);
document.getElementById("gross").value = Gross;
}
</script>
</body>
</html>
gross_amount函数首先完美运行，但是当我尝试计算重复行的总量时，javascript不能用于另一行.Plz尽快帮助这个脚本。如果可能，请给我一个jsfiddle链接。 谢谢你提前.......
答案 0 :(得分：0)
动态表是什么意思？在 grossAmount 函数中，您将通过 id 选择始终相同的元素...如果其他元素依赖于dom，则需要具有不同的id元素。 。 使用您的功能，您将始终如一。
尝试类似的事情：
function FormCtrl($) {
var self = this;
self.form = $('#foo');
self.addRowToTheForm = function() {
var row = $('.table-row', self.form).first().clone();
row.find('input').val(0);
return $('tbody', self.form).append(row);
};
self.onValueChange = function(event, row) {
var vat = Number($('.form-control-vat', row).val()) || 0;
var net = Number($('.form-control-net', row).val()) || 0;
var result = net * ( (vat * net) / 100);
$('.table-row-result', row).val(result);
};
$('#addRow').click(self.addRowToTheForm);
self.form.on('change', 'input', function(event) {
var row = $(this).closest('.table-row');
return self.onValueChange(event, row);
});
}
jQuery(document).ready(FormCtrl);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="foo">
<thead>
<tr><th colspan="3"><button id="addRow">Add a Row</button></th></tr>
</thead>
<tbody>
<tr class="table-row">
<td><input type="number" class="form-control-vat" placeholder="VAT"/></td>
<td><input type="number" class="form-control-net" placeholder="NET"/></td>
<td><input type="number" class="table-row-result" placeholder="Result" readonly /></td>
</tr>
</tbody>
</table>