How to hide a column of a dynamically generated table, jquery?

Question

How to hide a column of a dynamically generated table, jquery?

Navigation

#1 by (2 votes)

1

I currently have a table:

    <table>
      <thead>
          <tr>
             <td class="nuevo-td">Forma de pago</td>
             <th class="label-cell nuevo-th">Disponible</th>
             <th class="label-cell nuevo-th">Seleccionar</th>
             <th class="label-cell nuevo-th classCantidad">Cantidad</th>
          </tr>
    </thead>
    <tbody id="formas_pagos" class="formas_pagos"></tbody>
</table>

This table is filled dynamically as follows:

$.each(response.data, function(index,value){
                        $('<tr>')
                            .append($('<td/>').addClass('nuevo-td nombrePago').text(value.forma_pago))
                            .append($('<td/>').addClass('nuevo-td cantPago').text(value.disponible.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')))
                            .append('<div class="cod_forma_pago" style="display:none">' + value.cod_forma_pago + '</div>')
                            .append('<div class="cod_banco" style="display:none">' + value.Cod_Banco + '</div>')
                            .append('<div class="monto_pago" style="display:none">' + value.monto_pago + '</div>')
                            .append($('<td/>').addClass('label-cell nuevo-td')
                                .append($('<label/>').addClass('label-checkbox item-content')
                                            .append('<input type="checkbox" name="tipo_pago" class="tipo_pago" value="' + value.disponible + '"/>')
                                            .append($('<span/>').addClass('item-media').append('<i class="icon icon-form-checkbox"></i>'))))
                            .append($('<td/>').addClass('label-cell classCantidad')
                                                .append('<input type="number" name="cantidad" class="cantidad" min="1" pattern="^[0-9]+" placeholder="Cantidad">'))
                            .appendTo(formas_pagos);
                    });
                      $(".classCantidad").toggle();
                      $('td:nth-child(4)').toggle();

And what I need to hide is the column that contains the class classCantidad , I was trying with $(".classCantidad").toggle(); and $('td:nth-child(4)').toggle(); but they are still showing. This column must be hidden when entering the view for the first time, since it will depend on whether the user brings a value from the previous screen or not.

Thank you very much in advance.

jquery

asked by JG_GJ 18.10.2018 в 06:13

source

1 answer

Forward list and iterator User permissions between oracle databases

score 2 · Accepted Answer

I hope this is what you are looking for (Click on RUN)

function ocultarCantidad() {
  $('td:nth-child(4)').hide();
  $('th:nth-child(4)').hide();
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
      <thead>
          <tr>
             <td class="nuevo-td">Forma de pago</td>
             <th class="label-cell nuevo-th">Disponible</th>
             <th class="label-cell nuevo-th">Seleccionar</th>
             <th class="label-cell nuevo-th classCantidad">Cantidad</th>
          </tr>
    </thead>
    <tbody id="formas_pagos" class="formas_pagos">
      <tr>
        <td>ejemplo1</td>
        <td>ejemplo2</td>
        <td>ejemplo3</td>
        <td>ejemplo4</td>
      </tr>
      <tr>
        <td>ejemplo1</td>
        <td>ejemplo2</td>
        <td>ejemplo3</td>
        <td>ejemplo4</td>
      </tr>
      <tr>
        <td>ejemplo1</td>
        <td>ejemplo2</td>
        <td>ejemplo3</td>
        <td>ejemplo4</td>
      </tr>
    </tbody>
</table>

<button onclick="ocultarCantidad()">Ocultar Cantidad</button>