What I want to do is calculate the values of the SubTotal field, since this is the result of the multiplication between the values of the Price field and the value entered in field text Quantity . In addition to calculating the VAT of the sum of the Subtotals and the Total (Sum of the Subtotals and the IGV)
I'm new to JS and I do not know much about the language.
JS:
$('.a').on('click',function(){
var trPrincipal = this.offsetParent.parentElement; //Buscamos el TR principal
// var firstName = trPrincipal.children[0].outerText; //Capturamos el FirstName
var idproducto=trPrincipal.children[0].outerText;
var nombreprod=trPrincipal.children[1].outerText;
var peso=trPrincipal.children[3].outerText+' '+trPrincipal.children[2].outerText;
var precio=trPrincipal.children[5].outerText;
// var lastName = trPrincipal.children[1].outerText+' '+trPrincipal.children[2].outerText; //Capturamos el LastName
$(".othertable").append("<tr><td>"+
idproducto+"</td><td>"+
nombreprod
+"</td><td>"+
peso+"</td><td>"+
precio+"<td><input type='text' placeholder='Ingresar cantidad'/></td><td><input type='text' disabled value='458.15'></td><td><input type='button' class='btneli' id='idbotoneli' value='Eliminar'></td></tr>");
trPrincipal.style.display = "none"; //Ocultamos el TR de la Primer Tabla
var btn_ = document.querySelectorAll(".btneli"); // Buscamos todos los elementos que tengan la clase .btneli
for(var a in btn_){ //Iteramos la variable btn_
var b = btn_[a];
if(typeof b == "object"){ //Solo necesitamos los objetos
b.onclick = function (){ //Asignamos evento click
var trBtn = this.offsetParent.parentElement; // buscamos el tr principal de la segunda tabla
var firstNameBtn = trBtn.children[0].outerText; //Capturamos el FirstName de la segunda tabla
trBtn.remove(); // eliminamos toda la fila de la segunda tabla
var tbl = document.querySelectorAll(".table td:first-child"); //Obtenemos todos los primeros elementos td de la primera tabla
for(var x in tbl){ //Iteramos los elementos obtenidos
var y = tbl[x];
if(typeof y == "object"){ //solo nos interesan los object
if (y.outerText == firstNameBtn){ //comparamos el texto de la variable y vs el firstNameBtn
var t = y.parentElement; //capturamos el elemento de la coincidencia
t.style.display = ""; //actualizamos el estilo display dejándolo en vacío y esto mostrará nuevamente la fila tr de la primera tabla
}
}
}
}
}
}
});
table{
margin:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container">
<table id="idsecond" class="table table-bordered table-hover">
<thead bgcolor="skyblue">
<tr>
<th>#</th>
<th>Articulo</th>
<th>Unidad M.</th>
<th>Peso/Volumen</th>
<th>Categoria</th>
<th>P.Unitario</th>
<th>Accion</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Arroz</td>
<td>Kilo</td>
<td>4</td>
<td>---</td>
<td>18</td>
<td><button class="a">Agregar</button></td>
</tr>
<tr>
<td>2</td>
<td>Sal</td>
<td>Kilo </td>
<td>2</td>
<td>---</td>
<td>14</td>
<td><button class="a">Agregar</button></td>
</tr>
<tr>
<td>3</td>
<td>Maiz</td>
<td>Kilo</td>
<td>3</td>
<td>---</td>
<td>12</td>
<td><button class="a">Agregar</button></td>
</tr>
</tbody>
</table>
<table class="othertable col-xs-12 table-condensed table-hover table-bordered">
<thead bgcolor="orange">
<tr>
<th>#</th>
<th>Nombre</th>
<th>Peso/Volumen</th>
<th>Precio</th>
<th>Cantidad</th>
<th>SubTotal</th>
<th>Accion</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<hr>
<div class="row">
<div class="form-group col-sm-4">
<label for="igv">IGV:</label>
<input type="text" class="form-control"disabled id="igv">
</div>
<div class="form-group col-sm-4">
<label for="total">Total:</label>
<input type="text" class="form-control" disabled id="total">
</div>
</div>
</div>