Skip to main content
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
mcve y mejora en etiquetas
Origen Enlace
Ruslan López
  • 11.8k
  • 14
  • 44
  • 88
<div class="card data-table nueva-table freeze-table">
            <table class="table">
                <thead>
                    <tr>
                        <th class="nuevo-td" rowspan="2" style="font-size: 11px;">Nombre</thd>
                        <th colspan="2">Volumen de negocio</th>
                        <th  rowspan="2" class="label-cell nuevo-th" style="font-size: 11px;">Titulo</th>
                    </tr>
                    <tr>
                        <th class="nuevo-td" style="font-size: 11px;">Individual</th>
                        <td class="label-cell nuevo-th" style="font-size: 11px;">Red</th>
                    </tr>
                </thead>
                <tbody id="listado_volumen_negocio" class="listado_volumen_negocio">
                </tbody>
            </table>
        </div>

$('.listado_volumen_negocio > tr').remove();
var listado_volumen_negocio = $('.listado_volumen_negocio');
var response = {
  "data": [{
      "Nivel_Codigo": 1,
      "Nombre": "Juan",
      "VNIndividual": 4,
      "VNRed": 7,
      "Titulo": "10"
    },
    {
      "Nivel_Codigo": 2,
      "Nombre": "Pablo",
      "VNIndividual": 5,
      "VNRed": 8,
      "Titulo": "11"
    }
  ]
};
$.each(response.data, function(index, value) {
  $('<tr/>')
    .append($('<td style="font-size: 11px;"/>').addClass('label-cell nuevo-td').append("<p style='margin-bottom: 0px;margin-top: 0px;'>" + value.Nivel_Codigo + "</p>" + "<p style='margin-bottom: 0px;margin-top: 0px;'>" + value.Nombre + "</p>"))
    .append($('<td style="font-size: 11px;"/>').addClass('label-cell nuevo-td').text(moneda(value.VNIndividual)))
    .append($('<td style="font-size: 11px;"/>').addClass('label-cell nuevo-td').text(moneda(value.VNRed)))
    .append($('<td style="font-size: 11px;"/>').addClass('label-cell nuevo-td').text(value.Titulo))
    .appendTo(listado_volumen_negocio);
});


function moneda(any) {
  return "$" + any;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card data-table nueva-table freeze-table">
  <table class="table">
    <thead>
      <tr>
        <th class="nuevo-td" rowspan="2" style="font-size: 11px;">Nombre</thd>
          <th colspan="2">Volumen de negocio</th>
          <th rowspan="2" class="label-cell nuevo-th" style="font-size: 11px;">Titulo</th>
      </tr>
      <tr>
        <th class="nuevo-td" style="font-size: 11px;">Individual</th>
        <td class="label-cell nuevo-th" style="font-size: 11px;">Red</th>
      </tr>
    </thead>
    <tbody id="listado_volumen_negocio" class="listado_volumen_negocio">
    </tbody>
  </table>
</div>

el tbody lo lleno dinamicamente de la siguiente forma:.

$('.listado_volumen_negocio > tr').remove();
                   var listado_volumen_negocio = $('.listado_volumen_negocio');
                     $.each(response.data, function (index, value) {
                        $('<tr/>')
                            .append($('<td style="font-size: 11px;"/>').addClass('label-cell nuevo-td').append("<p style='margin-bottom: 0px;margin-top: 0px;'>"+value.Nivel_Codigo+"</p>"+"<p style='margin-bottom: 0px;margin-top: 0px;'>"+value.Nombre+"</p>"))
                            .append($('<td style="font-size: 11px;"/>').addClass('label-cell nuevo-td').text(moneda(value.VNIndividual)))
                            .append($('<td style="font-size: 11px;"/>').addClass('label-cell nuevo-td').text(moneda(value.VNRed)))
                            .append($('<td style="font-size: 11px;"/>').addClass('label-cell nuevo-td').text(value.Titulo))
                        .appendTo(listado_volumen_negocio);
                    });
<div class="card data-table nueva-table freeze-table">
            <table class="table">
                <thead>
                    <tr>
                        <th class="nuevo-td" rowspan="2" style="font-size: 11px;">Nombre</thd>
                        <th colspan="2">Volumen de negocio</th>
                        <th  rowspan="2" class="label-cell nuevo-th" style="font-size: 11px;">Titulo</th>
                    </tr>
                    <tr>
                        <th class="nuevo-td" style="font-size: 11px;">Individual</th>
                        <td class="label-cell nuevo-th" style="font-size: 11px;">Red</th>
                    </tr>
                </thead>
                <tbody id="listado_volumen_negocio" class="listado_volumen_negocio">
                </tbody>
            </table>
        </div>

el tbody lo lleno dinamicamente de la siguiente forma:

$('.listado_volumen_negocio > tr').remove();
                   var listado_volumen_negocio = $('.listado_volumen_negocio');
                     $.each(response.data, function (index, value) {
                        $('<tr/>')
                            .append($('<td style="font-size: 11px;"/>').addClass('label-cell nuevo-td').append("<p style='margin-bottom: 0px;margin-top: 0px;'>"+value.Nivel_Codigo+"</p>"+"<p style='margin-bottom: 0px;margin-top: 0px;'>"+value.Nombre+"</p>"))
                            .append($('<td style="font-size: 11px;"/>').addClass('label-cell nuevo-td').text(moneda(value.VNIndividual)))
                            .append($('<td style="font-size: 11px;"/>').addClass('label-cell nuevo-td').text(moneda(value.VNRed)))
                            .append($('<td style="font-size: 11px;"/>').addClass('label-cell nuevo-td').text(value.Titulo))
                        .appendTo(listado_volumen_negocio);
                    });

$('.listado_volumen_negocio > tr').remove();
var listado_volumen_negocio = $('.listado_volumen_negocio');
var response = {
  "data": [{
      "Nivel_Codigo": 1,
      "Nombre": "Juan",
      "VNIndividual": 4,
      "VNRed": 7,
      "Titulo": "10"
    },
    {
      "Nivel_Codigo": 2,
      "Nombre": "Pablo",
      "VNIndividual": 5,
      "VNRed": 8,
      "Titulo": "11"
    }
  ]
};
$.each(response.data, function(index, value) {
  $('<tr/>')
    .append($('<td style="font-size: 11px;"/>').addClass('label-cell nuevo-td').append("<p style='margin-bottom: 0px;margin-top: 0px;'>" + value.Nivel_Codigo + "</p>" + "<p style='margin-bottom: 0px;margin-top: 0px;'>" + value.Nombre + "</p>"))
    .append($('<td style="font-size: 11px;"/>').addClass('label-cell nuevo-td').text(moneda(value.VNIndividual)))
    .append($('<td style="font-size: 11px;"/>').addClass('label-cell nuevo-td').text(moneda(value.VNRed)))
    .append($('<td style="font-size: 11px;"/>').addClass('label-cell nuevo-td').text(value.Titulo))
    .appendTo(listado_volumen_negocio);
});


function moneda(any) {
  return "$" + any;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card data-table nueva-table freeze-table">
  <table class="table">
    <thead>
      <tr>
        <th class="nuevo-td" rowspan="2" style="font-size: 11px;">Nombre</thd>
          <th colspan="2">Volumen de negocio</th>
          <th rowspan="2" class="label-cell nuevo-th" style="font-size: 11px;">Titulo</th>
      </tr>
      <tr>
        <th class="nuevo-td" style="font-size: 11px;">Individual</th>
        <td class="label-cell nuevo-th" style="font-size: 11px;">Red</th>
      </tr>
    </thead>
    <tbody id="listado_volumen_negocio" class="listado_volumen_negocio">
    </tbody>
  </table>
</div>

el tbody lo lleno dinamicamente.

Origen Enlace
JG_GJ
  • 703
  • 1
  • 14
  • 39

¿Como poner estatico el encabezado de una tabla html con jquery?

Tengo la siguiente table:

<div class="card data-table nueva-table freeze-table">
            <table class="table">
                <thead>
                    <tr>
                        <th class="nuevo-td" rowspan="2" style="font-size: 11px;">Nombre</thd>
                        <th colspan="2">Volumen de negocio</th>
                        <th  rowspan="2" class="label-cell nuevo-th" style="font-size: 11px;">Titulo</th>
                    </tr>
                    <tr>
                        <th class="nuevo-td" style="font-size: 11px;">Individual</th>
                        <td class="label-cell nuevo-th" style="font-size: 11px;">Red</th>
                    </tr>
                </thead>
                <tbody id="listado_volumen_negocio" class="listado_volumen_negocio">
                </tbody>
            </table>
        </div>

el tbody lo lleno dinamicamente de la siguiente forma:

$('.listado_volumen_negocio > tr').remove();
                   var listado_volumen_negocio = $('.listado_volumen_negocio');
                     $.each(response.data, function (index, value) {
                        $('<tr/>')
                            .append($('<td style="font-size: 11px;"/>').addClass('label-cell nuevo-td').append("<p style='margin-bottom: 0px;margin-top: 0px;'>"+value.Nivel_Codigo+"</p>"+"<p style='margin-bottom: 0px;margin-top: 0px;'>"+value.Nombre+"</p>"))
                            .append($('<td style="font-size: 11px;"/>').addClass('label-cell nuevo-td').text(moneda(value.VNIndividual)))
                            .append($('<td style="font-size: 11px;"/>').addClass('label-cell nuevo-td').text(moneda(value.VNRed)))
                            .append($('<td style="font-size: 11px;"/>').addClass('label-cell nuevo-td').text(value.Titulo))
                        .appendTo(listado_volumen_negocio);
                    });

Visualmente queda de esta forma:

introducir la descripción de la imagen aquí

Pero al seguir bajando en la tabla el encabezado se pierde y quiero que mientras vaya bajando la tabla el encabezado siga el registro para no perderlo.