Clean text in a table

Question

Clean text in a table

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

I have the following static table, where I make an ajax and get data. In my success ajax I ask if the array has data fill me the table.

<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>

But if I look again with another number and the array is empty, this will clean the table.

        $.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() {

                }
            });

I hope you have explained me well.

javascript html

asked by MoteCL 15.11.2018 в 15:29

source

2 answers

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>

You could do it with that simple Jquery line. What you do is put empty content at td that are second child of a tr that is a child of tbody .

answered by 15.11.2018 в 15:44

add days to a specific date with java script understand a method with closets (), next and find ()

score 2 · Accepted Answer

Here is an example of how to remove the rows of the table with 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>