<script type="text/javascript">
$( document ).ready(function() {
$( "input, textarea" ).focus(function() {
$( "input, textarea" ).next( ".info" ).hide();
$( this ).next( ".info" ).show();
});
});
function AddItem() {
var tbody = null;
var tabla = document.getElementById("tabla");
var nodes = tabla.childNodes;
for (var x = 0; x<nodes.length;x++) {
if (nodes[x].nodeName == 'TBODY') {
tbody = nodes[x];
break;
}
}
if (tbody != null) {
var tr = document.createElement('tr');
tr.innerHTML = '<td><input type="text" name="Numero[]"/></td><td><input type="text" name="Codigo Catalogo[]"/></td><td><input type="text" name="Descripcion[]"/></td><td><input type="text" name="UM[]"/></td><td><input type="text" name="cantidad[]" onChange="Calcular(this);" value="1" /></td><td><input type="text" name="precunit[]" onChange="Calcular(this);" value="0"/></td><td><input type="text" name="totalitem[]" readonly /></td><td><button type="button" value="Delete Row" onClick="Deletebtn(this); ReCalcular(this);" class="btn btn-danger delete"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></td>';
tbody.appendChild(tr);
}
}
function Calcular(ele) {
var cantidad = 0, precunit = 0, totalitem = 0;
var tr = ele.parentNode.parentNode;
var nodes = tr.childNodes;
for (var x = 0; x<nodes.length;x++) {
if (nodes[x].firstChild.name == 'cantidad[]') {
cantidad = parseFloat(nodes[x].firstChild.value,10);
}
if (nodes[x].firstChild.name == 'precunit[]') {
precunit = parseFloat(nodes[x].firstChild.value,10);
}
if (nodes[x].firstChild.name == 'totalitem[]') {
totalitem = parseFloat((precunit*cantidad),10);
nodes[x].firstChild.value = totalitem;
}
}
var total = document.getElementById("total");
if (total.innerHTML == 'NaN') {
total.innerHTML = 0;
}
total.innerHTML = parseFloat(total.innerHTML)+totalitem;
}
function Deletebtn(btndel) {
if (typeof(btndel) == "object") {
$(btndel).closest("tr").remove();
} else {
return false;
}
}
//ESTA PARTE YA NO FUNCIONA
function ReCalcular(ele){
var cantidad = 0, precunit = 0, totalitem = 0;
var tr = ele.parentNode.parentNode;
var nodes = tr.childNodes;
for (var x = 0; x<nodes.length;x++) {
if (total.innerHTML == 'NaN') {
total.innerHTML = 0;
}
total.innerHTML = parseFloat(total.innerHTML)+totalitem;
}
}
</script>
</head>
<body>
<div class="container">
<form class="form-horizontal" method="post" title="Bienes solicitados">
<!-- ACA INICIA MI CODIGO -->
<div class="panel panel-default">
<div class="panel-body"><b>BIENES Y SERVICIOS SOLICITADOS:</b>
<hr>
<div class="form-group">
<div class="col-md-12">
<div class="row">
<div class="col-md-12" align="center">
<form name="frmitems" id="frmitems">
<div id="contenedor">
<table id="tabla" class="col-md-12">
<thead>
<!-- HEADER DE LAS COLUMNAS -->
<tr>
<th class="col-md-8 col-xs-6 col-md-4 input-group-addon">Numero</th>
<th class="col-md-8 col-xs-6 col-md-4 input-group-addon">Codigo Catalogo</th>
<th class="col-md-8 col-xs-6 col-md-4 input-group-addon">Descripcion</th>
<th class="col-md-8 col-xs-6 col-md-4 input-group-addon">UM</th>
<th class="col-md-8 col-xs-6 col-md-4 input-group-addon">Cantidad</th>
<th class="col-md-8 col-xs-6 col-md-4 input-group-addon">Precio Unitario</th>
<th class="col-md-8 col-xs-6 col-md-4 input-group-addon">Total</th>
<th class="col-md-8 col-xs-6 col-md-4 input-group-addon"></th>
</tr>
</thead>
<tbody>
<!-- ACA SE AUTO INCREMENTAN LAS CELDAS -->
</tbody>
<tfoot>
<!-- FOOTER DE LA TABLA -->
</tfoot>
</table>
<hr>
<div>
<button type="button" onClick="AddItem();" class="btn btn-success" id="agregar-renglon" align="center"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true" align="center"></span></button>
</div>
</form>
<div class="input-group">
<div class="input-group-addon"><p>$
<span id="total"> 0</span></p>
</div>
</div>
<p></p>
<textarea class="form-control" rows="1" placeholder=""></textarea>
<div class="info" align="left">
<p>» (01) Consignar los datos respecto a del bien/servicio según figura en el catálogo SIByS. Este requisito es obligatorio para los requerimientos.</p>
<p>» (02) Consignar la moneda y el valor total de la solicitud de gastos en letras. Ej. PESOS CUARENTA Y CINCO MIL CON 00/100.</p>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- PRINT PDF -->
<div class="clearfix"></div>
<div class="row">
<div class="col-md-12" align="center">
<a class="btn btn-primary"><span class="glyphicon glyphicon-print"></span></a></button>
</div>
</div>
</div>
</body>
</html>