2

Actualmente tengo una tabla:

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

Dicha tabla la voy llenando dinamicamente de la siguiente forma:

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

Y lo que necesito ocultar es la columna que contiene la clase classCantidad, estaba intentando con $(".classCantidad").toggle(); y $('td:nth-child(4)').toggle();pero se siguen mostrando. Dicha columna debe ser oculta al ingresar a la vista por primera vez, ya que dependera el mostrarse si el usuario trae o no un valor de la pantalla anterior.

De antemano muy agradecido.

1

2 respuestas 2

3

Espero que esto sea lo que buscas (Pulsa en EJECUTAR)

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>

1

les comparto este aporte, encontrado en https://codepen.io/feger/pen/deIki lo adapté y quedó así:

		$("input:checkbox:not(:checked)").each(function() {
		    var column = "table ." + $(this).attr("name");
		    $(column).hide();
		});

		$("input:checkbox").click(function(){
		    var column = "table ." + $(this).attr("name");
		    $(column).toggle();
		});
	.clearfix:before,.clearfix:after {
		    content: " ";display: table; /* 2 */}
		.clearfix:after {clear: both;}
		.clearfix {*zoom: 1;}

		.options {margin-bottom: 8px;}

		/* Style checkboxes as Toggle Buttons */
		.ck-button {
		    margin:2px;
		    background-color:#EFEFEF;
		    border-radius:4px;
		    border:1px solid #aaa;
		    overflow:auto;
		    float:left;
		    color:#aaa;
		}
		.ck-button:hover {
		    background-color:#ddd;
		}
		.ck-button label {
		    float:left;
		    width:auto;
		    margin-bottom: 0;
		}
		.ck-button label span {
		    text-align:center;
		    padding:3px 8px;
		    display:block;
		}
		.ck-button label input {
		    position:absolute;
		    top:-20px;
		}
		.ck-button input:checked + span {
		    color:#111;
		}
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js"></script>

</head>
<body>
	<div class="options clearfix">
		<div class="ck-button">
			<label><input type="checkbox" value="1" name="first_name" checked="checked"><span>First Name</span></label>
		</div>
		<div class="ck-button">
			<label><input type="checkbox" value="1" name="last_name" checked="checked"><span>Last Name</span></label>
		</div>
		<div class="ck-button">
			<label><input type="checkbox" value="1" name="email"><span>Email</span></label>
		</div>
	</div>

		<table class="table table-striped table-bordered table-hover table-condensed">
			<thead>
				<tr>
				 <th class="first_name">First Name</th>
				 <th class="last_name">Last Name</th>
				 <th class="email">Email</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					 <td class="first_name">Larry</td>
					 <td class="last_name">Hughes</td>
					 <td class="email">larry@gmail.com</td>
				</tr>
				<tr>
					 <td class="first_name">Mike</td>
					 <td class="last_name">Tyson</td>
					 <td class="email">mike@gmail.com</td>
				</tr>
			</tbody>
		</table>

</body>
</html>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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