1

Holas.

Tengo la siguiente tabla construida con DataTable de JQuery:

introducir la descripción de la imagen aquí

Tengo también implementada la función de eliminar la fila seleccionada, pero ahí quisiera poder obtener el valor de la última columna (Total) de la fila seleccionada antes de eliminarla, mi código está así pero no funciona:

//Agregar Producto
$('#addRow').on('click', function () {
                
                if ($("#txtCantidad").val() != "")
                {
                    if (parseInt($("#txtCantidad").val()) <= parseInt($("#txtStock").val()))
                    {
                        var Producto = $("#txtProducto").val().split("|");
                        var Codigo = Producto[0].trim();
                        var Nombre = Producto[1].trim();
                        var total = parseFloat($("#txtCantidad").val()) * parseFloat($("#txtPrecio").val());

                        t.row.add([
                            counter,
                            Codigo + "<input id='dtsCodigo" + counter + "' name='dtsCodigo" + counter + "' type='hidden' value='" + Codigo + "'>",
                            Nombre + "<input id='dtsNombre" + counter + "' name='dtsNombre" + counter + "' type='hidden' value='" + Nombre + "'>",
                            $("#txtUnidadMedida").val() + "<input id='dtsUnidadMedida" + counter + "' name='dtsUnidadMedida" + counter + "' type='hidden' value='" + $("#txtUnidadMedida").val() + "'>",
                            $("#txtCantidad").val() + "<input id='dtsCantidad" + counter + "' name='dtsCantidad" + counter + "' type='hidden' value='" + $("#txtCantidad").val() + "'>",
                            $("#txtPrecio").val() + "<input id='dtsPrecio" + counter + "' name='dtsPrecio" + counter + "' type='hidden' value='" + $("#txtPrecio").val() + "'>",
                            total.toFixed(2) + "<input id='dtsTotal" + counter + "' name='dtsTotal" + counter + "' type='hidden' value='" + total.toFixed(2) + "'>",
                            "<a href='/Charlas/EliminarCharla/34' class='btn btn-primary btn-eliminar' title='Eliminar Charla'><i class='fas fa-trash-alt' aria-hidden='true'></i></a>"
                        ]).draw(false);

                        $("#txtCont").val(counter);
                        counter++;

                        $("#txtProducto").val("");
                        $("#txtCantidad").val("");
                        $("#txtStock").val("");
                        $("#txtPrecio").val("");
                        $("#txtUnidadMedida").val("");                        

                        var TotalGeneral = parseFloat($("#txtTotal").val()) + parseFloat(total);
                        $("#txtTotal").val(TotalGeneral.toFixed(2));
                    }
                    else
                    {
                        alertify.error("La cantidad indicada es mayor al stock.");
                    }
                }
                else
                {
                    alertify.error("Debe indicar la cantidad");
                }

            });

//Seleccionar
$('#dtProductos tbody').on('click', 'tr', function () {
                if ($(this).hasClass('selected')) {
                    $(this).removeClass('selected');
                }
                else {
                    t.$('tr.selected').removeClass('selected');
                    $(this).addClass('selected');
                    alert(t.row(this).node(1).data());
                }
            });

//Eliminar una fila
$('#DeleteRow').click(function () {
                var Total = t.row('.selected').child(6).html();
                t.row('.selected').remove().draw(false);
                reordenar();
            });

function reordenar() {
                var num = 1;
                $('#dtProductos tbody tr').each(function () {
                    $(this).find('td').eq(0).text(num);
                    num++;
                });
                counter = num;
            }
<table class="table table-bordered table-hover" id="dtProductos" style="width: 100%;" cellspacing="0">
                                    <thead class="bg-danger text-white">
                                        <tr>
                                            <th>Nro</th>
                                            <th>Código</th>
                                            <th>Nombre</th>
                                            <th>Unidad Medida</th>
                                            <th>Cantidad</th>
                                            <th>Precio</th>
                                            <th>Total</th>
                                            <th>Borrar</th>
                                        </tr>
                                    </thead>
                                    <tfoot class="bg-secondary text-white">
                                        <tr>
                                            <th>Nro</th>
                                            <th>Código</th>
                                            <th>Nombre</th>
                                            <th>Unidad Medida</th>
                                            <th>Cantidad</th>
                                            <th>Precio</th>
                                            <th>Total</th>
                                            <th>Borrar</th>
                                        </tr>
                                    </tfoot>
                                    <tbody></tbody>
                                </table>

Me sale que la función "html" no existe para child. Si conocen alguna otra función u otra manera de obtener el valor de la columna Total de la fila seleccionada.

Ojo también, que mis tr los construyo con t.row.add.

2
  • Deberias agregar tu HTML.
    – alanfcm
    el 19 dic. 2019 a las 18:26
  • Tienes razón @alanfcm, lo he incluido. el 19 dic. 2019 a las 18:39

1 respuesta 1

2

En lugar de child() puedes usar la funcion data() asi:

var t = $("#dtProductos").DataTable({});

//Agregar Producto
$('#addRow').on('click', function () {
                
                if ($("#txtCantidad").val() != "")
                {
                    if (parseInt($("#txtCantidad").val()) <= parseInt($("#txtStock").val()))
                    {
                        var Producto = $("#txtProducto").val().split("|");
                        var Codigo = Producto[0].trim();
                        var Nombre = Producto[1].trim();
                        var total = parseFloat($("#txtCantidad").val()) * parseFloat($("#txtPrecio").val());

                        t.row.add([
                            counter,
                            Codigo + "<input id='dtsCodigo" + counter + "' name='dtsCodigo" + counter + "' type='hidden' value='" + Codigo + "'>",
                            Nombre + "<input id='dtsNombre" + counter + "' name='dtsNombre" + counter + "' type='hidden' value='" + Nombre + "'>",
                            $("#txtUnidadMedida").val() + "<input id='dtsUnidadMedida" + counter + "' name='dtsUnidadMedida" + counter + "' type='hidden' value='" + $("#txtUnidadMedida").val() + "'>",
                            $("#txtCantidad").val() + "<input id='dtsCantidad" + counter + "' name='dtsCantidad" + counter + "' type='hidden' value='" + $("#txtCantidad").val() + "'>",
                            $("#txtPrecio").val() + "<input id='dtsPrecio" + counter + "' name='dtsPrecio" + counter + "' type='hidden' value='" + $("#txtPrecio").val() + "'>",
                            total.toFixed(2) + "<input id='dtsTotal" + counter + "' name='dtsTotal" + counter + "' type='hidden' value='" + total.toFixed(2) + "'>",
                            "<a href='/Charlas/EliminarCharla/34' class='btn btn-primary btn-eliminar' title='Eliminar Charla'><i class='fas fa-trash-alt' aria-hidden='true'></i></a>"
                        ]).draw(false);

                        $("#txtCont").val(counter);
                        counter++;

                        $("#txtProducto").val("");
                        $("#txtCantidad").val("");
                        $("#txtStock").val("");
                        $("#txtPrecio").val("");
                        $("#txtUnidadMedida").val("");                        

                        var TotalGeneral = parseFloat($("#txtTotal").val()) + parseFloat(total);
                        $("#txtTotal").val(TotalGeneral.toFixed(2));
                    }
                    else
                    {
                        alertify.error("La cantidad indicada es mayor al stock.");
                    }
                }
                else
                {
                    alertify.error("Debe indicar la cantidad");
                }

            });

//Seleccionar
$('#dtProductos tbody').on('click', 'tr', function () {
                if ($(this).hasClass('selected')) {
                    $(this).removeClass('selected');
                }
                else {
                    t.$('tr.selected').removeClass('selected');
                    $(this).addClass('selected');
                    alert(t.row(this).node(1).data());
                }
            });

//Eliminar una fila
$('#DeleteRow').click(function () {
                var Total = t.row('.selected').data()[6];
                console.log(Total);
                t.row('.selected').remove().draw(false);
                reordenar();
            });

function reordenar() {
                var num = 1;
                $('#dtProductos tbody tr').each(function () {
                    $(this).find('td').eq(0).text(num);
                    num++;
                });
                counter = num;
            }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet"/>
<button id="DeleteRow">Borrar</button>
<table class="table table-bordered table-hover" id="dtProductos" style="width: 100%;" cellspacing="0">
                                    <thead class="bg-danger text-white">
                                        <tr>
                                            <th>Nro</th>
                                            <th>Código</th>
                                            <th>Nombre</th>
                                            <th>Unidad Medida</th>
                                            <th>Cantidad</th>
                                            <th>Precio</th>
                                            <th>Total</th>
                                            <th>Borrar</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    <tr class="selected">
                                    <td>1</td>
                                    <td>12</td>
                                    <td>Manzana</td>
                                    <td>Docena</td>
                                    <td>2</td>
                                    <td>5</td>
                                    <td>10</td>
                                    <td>Si</td>
                                    </tr>
                                    </tbody>
                                    <tfoot class="bg-secondary text-white">
                                        <tr>
                                            <th>Nro</th>
                                            <th>Código</th>
                                            <th>Nombre</th>
                                            <th>Unidad Medida</th>
                                            <th>Cantidad</th>
                                            <th>Precio</th>
                                            <th>Total</th>
                                            <th>Borrar</th>
                                        </tr>
                                    </tfoot>
                                    <tbody></tbody>
                                </table>

1
  • 1
    Excelente!!! Con eso lo solucioné: t.row('.selected').data()[6] Muchas gracias @alanfcm el 19 dic. 2019 a las 20:13

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.