JSFiddle - React, Tailwind, and code Playground

by datoweb

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script language="javascript">
/** Añadir o Borror Fila de la Tabla **/
var cont=1;
/** Añade Fila **/
function addRowX()
{
cont++;
var indiceFila=1;
myNewRow = document.getElementById('tabla').insertRow(-1);
myNewRow.id=indiceFila;

myNewCell=myNewRow.insertCell(-1);
myNewCell.innerHTML='<center><input name="unidad_'+cont+'" type="text" size="5" onkeyup="cal('+cont+')" /></center>';

myNewCell=myNewRow.insertCell(-1);
myNewCell.innerHTML='<center><input name="monto_'+cont+'" type="text" size="10" readonly="readonly" value="100" /></center>';

myNewCell=myNewRow.insertCell(-1);
myNewCell.innerHTML='<center><input name="ptotal_'+cont+'" type="text" size="10" /></center>';


indiceFila++;
}
/** Asigna Valor al Contador **/
function asigna()
{
valor=document.form.var_cont.value=cont;
}
/**Multiplica las Unida por el Costo**/
function cal(valor){

var unidaddin= 'unidad_' + valor;
var costodin= 'monto_' + valor;
var ptotaldin= 'ptotal_' + valor;

console.log(unidaddin);

var unidad = $("input[name="+unidaddin+"]").val();
var costo = $("input[name="+costodin+"]").val();
var resultado = unidad * costo
$("input[name="+ptotaldin+"]").val(resultado);

}
</script>

<form name="factura">
<input type="button" name="b1" value="A&ntilde;adir" onClick="addRowX()"><input type="hidden" name="var_cont">
</table>
<table border="1" id="tabla" bordercolor="#FFCC33" cellspacing="1" align="center" width="600">
<thead>
<tr align="center">
<td width="10%"><strong>Unidad</strong></td>
<td width="10%"><strong>Monto</strong></td>
<td width="10%"><strong>Total</strong></td>
</tr>
</thead>
<tbody>
<tr>
<td align="center"><input name="unidad_1" type="text" size="5" onkeyup="cal(1)" /></td>
<td align="center"><input name="monto_1" type="text" size="10" readonly="readonly" value="100" /></td>
<td align="center"><input name="ptotal_1" type="text" size="10" /></td>
</tr>
</tbody>
</table>
</form>