Travel a dynamic table in Jquery

0

I have my button that adds detail to a table, this is:

$("#btnAgregarFila").click(function () {
        var cont_fila = ($('#det_comprobante tbody').find('tr').length) + 1;
        var fila = '<tr>';
        fila = fila + '<td scope="row">' + cont_fila + '</td>';
        fila = fila + '<td><input type="text" class="form-control text-center" id="respuesta_' + cont_fila + '" placeholder="Respuesta" "/></td>';
        fila = fila + '<td><select class="form-control text-center" id="alternativa_' + cont_fila + '" "><option value="">.:: ELIJA ::.</option><option value="1">SI</option><option value="2">NO</option></select></td>';
        fila = fila + '<td><a href="javascript:void(0);" class="eliminar_fila" onclick="eliminar_detalle(this,' + cont_fila + ');"><i class="fa fa-trash-o fa-2x"></i></a></td>';
        fila = fila + '</tr>';
        $("#det_comprobante").append(fila);
    });

And with this function I go through my detail table and see my detailed:

function guardar_pregunta() {
        var detalle = "[";
        for (var i = 1; i < document.getElementById('det_comprobante').rows.length; i++) {
            detalle = detalle
                    + '{"respuesta":"'
                    + document.getElementById('det_comprobante').rows[i].cells[0].childNodes[0].value + '",'
                    + '"alternativa":"'
                    + document.getElementById('det_comprobante').rows[i].cells[1].childNodes[0].value + '",'
                    + '}'
            if (i == document.getElementById('det_comprobante').rows.length - 1) {
                detalle = detalle + "]";
            } else {
                detalle = detalle + ',';
            }
        }
        console.log(detalle);
    }

Finally, it gives me one more detail that is found:

[{"respuesta":"undefined","alternativa":"Hola",},{"respuesta":"undefined","alternativa":"undefined",}]

As you see, it generates a data but I hope you can help me

    
asked by Ivan More Flores 22.09.2017 в 01:06
source

1 answer

0

When you go through the rows you should consider the index 0 at the beginning of your for . Also, when you build your chain detalle you did not correctly consider the cell in the row.

function guardar_pregunta() {
        var detalle = "[";
        for (var i = 0; i < document.getElementById('det_comprobante').rows.length; i++) {
            detalle = detalle
                    + '{"respuesta":"'
                    + document.getElementById('det_comprobante').rows[i].cells[1].childNodes[0].value + '",'
                    + '"alternativa":"'
                    + document.getElementById('det_comprobante').rows[i].cells[2].childNodes[0].value + '"'
                    + '}'
            if (i == document.getElementById('det_comprobante').rows.length - 1) {
                detalle = detalle + "]";
            } else {
                detalle = detalle + ',';
            }
        }
        console.clear();
        console.log(detalle);
    }
    
    $("#btnAgregarFila").click(function () {
        var cont_fila = ($('#det_comprobante tbody').find('tr').length) + 1;
        var fila = '<tr>';
        fila = fila + '<td scope="row">' + cont_fila + '</td>';
        fila = fila + '<td><input type="text" class="form-control text-center" id="respuesta_' + cont_fila + '" placeholder="Respuesta" "/></td>';
        fila = fila + '<td><select class="form-control text-center" id="alternativa_' + cont_fila + '" "><option value="">.:: ELIJA ::.</option><option value="1">SI</option><option value="2">NO</option></select></td>';
        fila = fila + '<td><a href="javascript:void(0);" class="eliminar_fila" onclick="eliminar_detalle(this,' + cont_fila + ');"><i class="fa fa-trash-o fa-2x"></i></a></td>';
        fila = fila + '</tr>';
        $("#det_comprobante").append(fila);
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="btnAgregarFila" value="Agregar Fila" />
<table id="det_comprobante">
<tbody>
</table>

<input type="button" value="Mostrar" onclick="guardar_pregunta()" />
    
answered by 22.09.2017 в 01:28