Resumiendo: tienes una tabla, y en esa tabla filas, y cada fila tiene asociado un índice indexFila
y un idArticulo
(tú le pusiste cont
en vez de indexFila
pero me tomaré esa licencia), con los cuales vas armando el name o el id de distintos inputs/controles que se dibujan en la fila.
La tercera columna tiene un campo de texto con id prenda<indexFila>
o sea tendrás prenda1, prenda2, prenda3, etc. Y tiene un botón cuyo click llama a una funcion revisarDespacho que se ejecutará tomando como argumentos el valor del mentado campo de texto y el idArticulo
asociado a la fila. Supongamos que es la fila 7 y el artículo 3, lo que insertas tiene en simple la forma
'<input type="text" id="prenda7" name="prenda[]">'+
'<button type="button" onclick="revisarDespacho('+document.getElementById('prenda7').value()+','+3+')"></button>'
Fíjate en la declaración de este handler:
onclick="revisarDespacho('+document.getElementById('prenda7').value()+','+3+')"
Está generando dos problemas: primero, getElementById retorna un Element, de entre los cuales un input no tiene un método value
como jQuery sino un atributo value
console.log( document.getElementById('prenda7').value() ); // mal
Uncaught TypeError: document.getElementById(...).value is not a function
console.log( document.getElementById('prenda7').value ); // bien
segundo y más importante, estás concatenando en el html el valor del input prenda7
(que todavía no existe) y no una referencia textual. Dado que document.getElementById('prenda7')
es null y null no tiene un atributo value
debieras estar viendo un error en tu consola.
El handler debiera ser:
onclick="revisarDespacho(document.getElementById('prenda7').value, 3)"
Como gran parte de la confusión te está pasando por la mezcla de comillas dobles y simples, te recomiendo familiarizarte con el uso de template literals que te permite usar comillas dobles y simples sin escapar, saltos de línea e interpolación de variables y fórmulas. En esa celda, por ejemplo, teniendo prenda
(hoy vacío), indexFila
y un idProducto
, se escribiría como
let celda = `<td>
<input type="text" style="width:80px;" id="prenda${indexFila}" name="prenda[]">${prenda}
<button type="button" onclick="revisarDespacho(document.getElementById('prenda${indexFila}').value,${idarticulo})" class="btn btn-info">
<i class="fa fa-check"></i>
</button>
</td>`;
Te dejo un ejemplo funcionando en donde separé las modificaciones al dom (añadir tr
y a cada tr
sus td
) de la función que genera las celdas propiamente tales, las cuales de paso manejé como array para romper en piezas manejables el texto tan extenso.
let cont = 0,
detalles = 0;
const tabla = document.querySelector('#detalles');
function getCeldas(idarticulo, articulo, precio_venta, indexFila, cantidad = 1) {
let descuento = 0,
prenda = '',
subtotal = cantidad * precio_venta;
return [`<td>
<button type="button" class="btn btn-danger" onclick="eliminarDetalle(${indexFila})">X</button>
</td>`,
`<td>
<input type="hidden" name="idarticulo[]" value="${idarticulo}">${articulo}
</td>`,
`<td>
<input type="text" style="width:80px;" id="prenda${indexFila}" name="prenda[]" value="ejemplo ${indexFila}" >${prenda}
<button type="button" onclick="revisarDespacho(document.getElementById('prenda${indexFila}').value,${idarticulo})" class="btn btn-info">
<i class="fa fa-check"></i>
</button>
</td>`,
`<td class="numeric">
<input type="number" name="cantidad[]" id="cantidad[]" value="${cantidad}"></td>`,
`<td class="numeric">
<input type="number" name="precio_venta[]" id="precio_venta[]" value="${precio_venta}"></td>`,
`<td class="numeric">
<input type="number" name="descuento[]" value="${descuento}">
</td>`,
`<td>
<span name="subtotal" id="subtotal${indexFila}">${subtotal}</span>
</td>`,
`<td>
<button type="button" onclick="modificarSubototales()" class="btn btn-info">
<i class="fa fa-refresh"></i></button>
</td>`
];
}
function revisarDespacho(prendas, idArticulo) {
console.log({
prendas,
idArticulo
});
}
function modificarSubototales() {
console.log('no sé qué hace esto');
}
function agregarDetalle(idarticulo, articulo, precio_venta, cantidad = 1) {
let fila = document.createElement('tr'),
celdas = getCeldas(idarticulo, articulo, precio_venta, cont, cantidad);
fila.id = `fila${cont}`;
fila.className = 'filas';
celdas.forEach(celda => {
$(fila).append(celda);
})
tabla.appendChild(fila);
cont++;
detalles = detalles + 1;
}
$(document).ready(function() {
agregarDetalle(1, 'Camiseta', 99, 2);
agregarDetalle(2, 'Pantalón', 230);
});
#detalles {
min-width: 300px;
}
#detalles .filas {
height: 1em;
min-width: 50px;
}
#detalles th {
font-size: 0.95em
}
#detalles th,
#detalles td {
border: 1px solid #ccc;
}
td.numeric input {
width: 60px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/7cfb5e92f4.js" crossorigin="anonymous"></script>
<table id="detalles">
<thead>
<th>Quitar</th>
<th>Articulo</th>
<th>Prenda</th>
<th>Cantidad</th>
<th>Precio</th>
<th>Descuento</th>
<th>Subtotal</th>
<th>Actualizar</th>
</thead>
<tbody></tbody>
</table>