Como agregar mas filas con javascript y php?
Publicado por Antunez (3 intervenciones) el 29/11/2021 03:12:44
Quisiera saber como podría agregar mas filas al momento de llegar al ultimo textbox? usando tabular o enter para agregar mas filas, Lo que quiero hacer es un form de factura que pueda agregar la cantidad de productos que se necesitan sin tener que usar un botón para agregar filas pero si tener uno que me permita eliminarlas si se equivoco esto seria lo que tengo hasta el momento, de ante mano gracias por la ayuda.
factura.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!DOCTYPE html>
<html>
<head>
<title>Ingreso de compras</title>
<link rel="icon" href="../../img/icon/favi-alfredito.png" type="image/x-icon">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ----------><script type="text/javascript">
function format(input) {
var num = input.value.replace(/\,/g, '');
var decimales = "";
if (num.indexOf(".") >= 0) {
decimales = "." + num.split(".")[1].substring(0,2); // sólo nos quedamos con los dos primeros decimales
num = Math.floor(num); // redondeamos hacia abajo para quedarnos con la parte entera
}if (!isNaN(num)) {
num = num.toString().split('').reverse().join('').replace(/(?=\d*\,?)(\d{3})/g, '$1,');
// añadir los decimales al final!num = num.split('').reverse().join('').replace(/^[\,]/, '') + decimales;
input.value = num;
} else {alert('Solo se permiten numeros');
input.value = input.value.replace(/[^\d\,\.]*/g, '');
}}</script>
</head>
<style>
.ut{
padding: 6px 10px;border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}</style>
<body>
<h1 style="text-align: center;">FACTURAS DE COMPRAS</h1>
<div class="container">
<div class="row clearfix">
<div class="col-md-12">
<div class="row clearfix">
<div class="col-md-12">
<button id="add_row" class="btn btn-success">Agregar fila</button>
<button id='delete_row' class="btn btn-danger">Borrar fila</button>
</div>
</div><br>
<form>
<div class="field">
<label>N° compra</label> <input type="text" name="" style="width: 6%" class="ut" disabled><br><br>
<label>Proveedor:</label> <input type="text" name="" style="width: 7%;" placeholder="Código" minlength="3" class="ut" required autofocus> <input type="text" readonly style="width: 25%;" placeholder="Nombre proveedor" class="ut" disabled>
<label>CAI: </label><input type="text" name="" style="width: 29%" class="ut" placeholder="N° Clave de Autorización de Impresión" maxlength="39" required title="Campo incompleto" style="text-transform:uppercase;" onkeyup="javascript:this.value=this.value.toUpperCase();" onkeypress="return validito(event)" >
<label>N° factura:</label> <input type="text" name="" style="width: 15%" placeholder="N° de factura" class="ut" onkeypress="return esNum(event,this)" required minlength="19" maxlength="19" ><br><br>
<label>Fecha:</label> <input type="date" name="" class="ut" required>
<label>Valor: </label> <input type="text" name="" placeholder="L." style="width: 9%" class="ut" onchange="format(this)" maxlength="10" required> <button class="btn btn-info">Guardar</button>
</div>
<br><br>
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr>
<th class="text-center"> # </th>
<th class="text-center"> Código</th>
<th class="text-center"> Producto </th>
<th class="text-center"> Unidades</th>
<th class="text-center"> Precio </th>
<th class="text-center"> Total </th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>1</td>
<td><input type="text" name='code[]' placeholder='Código producto' class="form-control" /></td>
<td><input type="text" name='product[]' placeholder='Nombre producto' class="form-control"/></td>
<td><input type="text" name='qty[]' placeholder='Unidades producto' class="form-control qty" step="0" min="0" maxlength="4" minlength="1" onkeypress="return esNum(event,this)" /></td>
<td><input type="text" name='price[]' placeholder='Precio producto' class="form-control price" step="0.00" min="0" maxlength="7" minlength="2" onkeypress="return esNum(event,this)" /></td>
<td><input type="text" name='total[]' placeholder='0.00' class="form-control total" readonly onchange="format(this)" /></td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
</div>
</div>
<div class="row clearfix" style="margin-top:20px">
<div class="pull-right col-md-4">
<table class="table table-bordered table-hover" id="tab_logic_total">
<tbody>
<tr>
<th class="text-center">Sub Total</th>
<td class="text-center"><input type="number" name='sub_total' placeholder='0.00' class="form-control" id="sub_total" readonly onchange="format(this)"/></td>
</tr>
<tr>
<th class="text-center">ISV</th>
<td class="text-center"><div class="input-group mb-2 mb-sm-0">
<input type="number" class="form-control" id="tax" placeholder="0">
<div class="input-group-addon">%</div>
</div></td>
</tr>
<tr>
<th class="text-center">Gravado ISV</th>
<td class="text-center"><input type="number" name='tax_amount' id="tax_amount" placeholder='0.00' class="form-control" readonly/></td>
</tr>
<tr>
<th class="text-center">Total</th>
<td class="text-center"><input type="number" name='total_amount' id="total_amount" placeholder='0.00' class="form-control" readonly /></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</form>
</body>
<script src="factura.js"></script>
<script>
function esNum(ev, el) {
/* ev: evento; el: elemento; */tecla = (document.all) ? ev.keyCode : ev.which;
// Permite un solo punto decimalif (el.value.indexOf('.') == -1 ? tecla == 43 : false) { return true; }
// Permite tecla de retroceso (borrar)if (tecla == 8) { return true; }
// Permite tecla Tabif (tecla == 9) { return true; }
// Permite tecla Tabif (tecla == 45) { return true; }
// Patrón de entrada: solo acepta numeros positivospatron = /[0-9]/;
tecla_fin = String.fromCharCode(tecla);
return patron.test(tecla_fin);
}</script>
<script>
function validito(e){
key = e.keyCode || e.which;
tecla = String.fromCharCode(key).toLowerCase();
letras = "abcdefghijklmnñopqrstuvwxyz0123456789-";
especiales = "8-37-39-46";
tecla_especial = falsefor(var i in especiales){
if(key == especiales[i]){
tecla_especial = true;break;
} }if(letras.indexOf(tecla)==-1 && !tecla_especial){
return false;
} }</script>
<script>
function validaNumericos(event) {
if(event.charCode >= 48 && event.charCode <= 57){
return true;
}return false;
}</script>
</html>
factura.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
$(document).ready(function(){
var i=1;$("#add_row").click(function(){b=i-1;
$('#addr'+i).html($('#addr'+b).html()).find('td:first-child').html(i+1);
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
i++;
});
$("#delete_row").click(function(){
if(i>1){
$("#addr"+(i-1)).html('');
i--;
}calc();
});
$('#tab_logic tbody').on('keyup change',function(){
calc();
});
$('#tax').on('keyup change',function(){
calc_total();
});
});
function calc()
{$('#tab_logic tbody tr').each(function(i, element) {
var html = $(this).html();
if(html!='')
{var qty = $(this).find('.qty').val();
var price = $(this).find('.price').val();
$(this).find('.total').val(qty*price);
calc_total();
}});
}function calc_total()
{ total=0;$('.total').each(function() {
total += parseInt($(this).val());
});
$('#sub_total').val(total.toFixed(2));
tax_sum=total/100*$('#tax').val();
$('#tax_amount').val(tax_sum.toFixed(2));
$('#total_amount').val((tax_sum+total).toFixed(2));
}Valora esta pregunta
0