1

Tengo la siguiente tabla estática, donde realizo un ajax y obtengo data. En mi success ajax pregunto si la array tiene datos me llene la tabla.

<table id="table1" class="table table-bordered" cellspacing="0" width="100%">
    <thead>
        <tr>
            <td width="20%"></td>
            <td width="25%">Usuario 1</td>
        </tr>
    </thead>
    <tbody>
        <tr id="fila1">
            <td>Activacion</td>
            <td data-name="Nombre" class="Nombre editable" data-type="select2"></td>

        </tr>
        <tr id="fila2">
            <td>Asistencia o Cotizacion Simple</td>
            <td data-name="Nombre" class="Nombre editable" data-type="select2"></td>
        </tr>
        <tr id="fila3">
            <td>Calculo Precio</td>
            <td data-name="Nombre" class="Nombre editable" data-type="select2"></td>
        </tr>
        <tr id="fila4">
            <td>Diseño (planos clientes)</td>
            <td data-name="Nombre" class="Nombre editable" data-type="select2"></td>
        </tr>
        <tr id="fila5">
            <td>Gestion de Venta</td>
            <td data-name="Nombre" class="Nombre editable" data-type="select2"></td>
        </tr>

    </tbody>
</table>

Pero si busco denuevo con otro numero y el array esta vacio que este limpie la tabla.

        $.ajax({
                url: 'JSON.php',
                method: "POST",
                data: {
                    nro_pi: nro_pi
                },
                dataType: "json",
                success: function(data) {

                    if (!$.isArray(data) || !data.length) {

                     //BORRAR DATOS DE TABLA
                    } else {

                      //MUESTRA DATOS
                },
                error: function() {

                }
            });

Espero haberme explicado bien.

2 respuestas 2

2

Te dejo un ejemplo de como remover las filas de la tabla con jQuery.

$('#boton').click(function() {
  $('#table1 .editable').empty();
});
table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table1">
  <thead>
        <tr>
            <td></td>
            <td>Usuario 1</td>
        </tr>
    </thead>
    <tbody>
        <tr id="fila1">
            <td>Activacion</td>
            <td class="editable">Prueba</td>

        </tr>
        <tr id="fila2">
            <td>Asistencia o Cotizacion Simple</td>
            <td class="editable">Prueba</td>
        </tr>
        <tr id="fila3">
            <td>Calculo Precio</td>
            <td class="editable">Prueba</td>
        </tr>
        <tr id="fila4">
            <td>Diseño (planos clientes)</td>
            <td class="editable">Prueba</td>
        </tr>
        <tr id="fila5">
            <td>Gestion de Venta</td>
            <td class="editable">Prueba</td>
        </tr>

    </tbody>
</table>

<button id="boton">Limpiar</button>

4
  • Deseo poder eliminar el texto de la tabla
    – MoteCL
    Commented el 15 nov. 2018 a las 14:43
  • ¿Las filas son fijas entonces?
    – Diego
    Commented el 15 nov. 2018 a las 14:44
  • Si solo que limpie el text del 2 TD
    – MoteCL
    Commented el 15 nov. 2018 a las 14:45
  • Lo actualicé, como las celdas de la tabla tienen una clase específica puedes aprovechar eso para seleccionarlas y limpiar solo su contenido.
    – Diego
    Commented el 15 nov. 2018 a las 14:51
0

$('tbody tr td:nth-child(2)').text('');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table1" class="table table-bordered" cellspacing="0" width="100%">
    <thead>
        <tr>
            <td width="20%"></td>
            <td width="25%">Usuario 1</td>
        </tr>
    </thead>
    <tbody>
        <tr id="fila1">
            <td>Activacion</td>
            <td data-name="Nombre" class="Nombre editable" data-type="select2">datos</td>

        </tr>
        <tr id="fila2">
            <td>Asistencia o Cotizacion Simple</td>
            <td data-name="Nombre" class="Nombre editable" data-type="select2">datos</td>
        </tr>
        <tr id="fila3">
            <td>Calculo Precio</td>
            <td data-name="Nombre" class="Nombre editable" data-type="select2">datos</td>
        </tr>
        <tr id="fila4">
            <td>Diseño (planos clientes)</td>
            <td data-name="Nombre" class="Nombre editable" data-type="select2">datos</td>
        </tr>
        <tr id="fila5">
            <td>Gestion de Venta</td>
            <td data-name="Nombre" class="Nombre editable" data-type="select2">datos</td>
        </tr>

    </tbody>
</table>

Podrías hacerlo con esa sencilla línea de Jquery. Lo que haces es ponerle contenido vacío a los td que sean segundo hijo de un tr que sea hijo del tbody.

Tu Respuesta

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

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