0
 <!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="es"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="es"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="es"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="es"> <!--<![endif]-->
<head>
    <meta charset="UTF-8">

    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <title>Ejemplo de Edici&oacute;n en el lugar con jQuery</title>

    <style>

    .contenedor{margin:28px auto;width:960px;font-family:sans-serif;font-size:12px;
        }
    table {width:95%;box-shadow:0 0 10px #ddd;text-align:left; background-color: #F2F2F2;}
    th {padding:5px;background:#555;color:#fff}
    td {padding:5px;border:solid #ddd;border-width:0 0 1px;}
        .editable span{display:block;}
        .editable span:hover {background:url(images/edit.png) 90% 50% no-repeat;cursor:pointer}

        td input{height:24px;width:200px;border:1px solid #ddd;padding:0 5px;margin:0;border-radius:6px;vertical-align:middle}
        a.enlace{display:inline-block;width:24px;height:24px;margin:0 0 0 5px;overflow:hidden;text-indent:-999em;vertical-align:middle}
            .guardar{background:url(images/save2.png) 0 0 no-repeat}
            .cancelar{background:url(images/cancel.png) 0 0 no-repeat}

    .mensaje{display:block;text-align:center;margin:0 0 20px 0}
        .ok{display:block;padding:10px;text-align:center;background:green;color:#fff}
        .ko{display:block;padding:10px;text-align:center;background:red;color:#fff}
        h1{color:white;text-align:center}

        tr:nth-child(odd){
    background: #E6E6E6;
    color: black;
}

tr:nth-child(even){
    background: #FFFFFF;
    color: #000000;
}
    </style>

</head>

<body>
    <div class="contenedor">
        <h1>TODAS FACTURAS</h1>
           <input type="button" value="REFRESCAR" class="btn btn-primary btn-lg btn-block" onclick = "location='todasfac.php'"/>
        <div class="mensaje"></div>
        <table class="editinplace">
            <tr>
                <th>Cod.</th>
                <th>Estado</th>
                <th>Factura</th>
                <th>Cliente</th>
                <th>Importe MXN</th>
                <th>Importe DLS</th>
                <th>FechaFactura</th>
                <th>FechaContrarecibo</th>
            </tr>
        </table>
    </div>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"> </script>

    <script>
    $(document).ready(function() 
    {
        /* OBTENEMOS TABLA */
        $.ajax({
            type: "GET",
            url: "uptodas.php?tabla=1"

        })
        .done(function(json) {
            json = $.parseJSON(json)
            for(var i=0;i<json.length;i++)
            {
                $('.editinplace').append(
                    "<tr><td class='id'>"+json[i].id+"</td><td data-campo='estado'><span>"+json[i].estado+"</span></td><td data-campo='factura'><span>"+json[i].factura+"</s pan></td><td data-campo='cliente'><span>"+json[i].cliente+"</span></td><td data-campo='importemn'><span>"+json[i].importemn+"</span></td><td data-campo='importe_dls'><span>"+json[i].importe_dls+"</span></td><td data-campo='fechafactura'><span>"+json[i].fechafactura+"</span></td><td class='editable' data-campo='fechacontrarecibo'><span>"+json[i].fechacontrarecibo+"</span></td></tr>");
            }
        });

        var td,campo,valor,id;
        $(document).on("click","td.editable span",function(e)
        {
            e.preventDefault();
            $("td:not(.id)").removeClass("editable");
            td=$(this).closest("td");
            campo=$(this).closest("td").data("campo");
            valor=$(this).text();
            id=$(this).closest("tr").find(".id").text();
            td.text("").html("<input type='text' name='"+campo+"' value='"+valor+"'><a class='enlace guardar' href='#'>Guardar</a><a class='enlace cancelar' href='#'>Cancelar</a>");
        });

        $(document).on("click",".cancelar",function(e)
        {
            e.preventDefault();
            td.html("<span>"+valor+"</span>");
            $("td:not(.id)").addClass("editable");
        });

        $(document).on("click",".guardar",function(e)
        {
            $(".mensaje").html("<img src='images/loading.gif'>");
            e.preventDefault();
            nuevovalor=$(this).closest("td").find("input").val();
            if(nuevovalor.trim()!="")
            {
                $.ajax({
                    type: "POST",
                    url: "uptodas.php",
                    data: { campo: campo, valor: nuevovalor, id:id }
                })
                .done(function( msg ) {
                    $(".mensaje").html(msg);
                    td.html("<span>"+nuevovalor+"</span>");
                    $("td:not(.id)").addClass("editable");
                    setTimeout(function() {$('.ok,.ko').fadeOut('fast');}, 3000);
                });
            }
            else $(".mensaje").html("<p class='ko'>Debes ingresar un valor</p>");
        });
    });

    </script>


    <script type="text/javascript">
        var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
        document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    </script>
    <script type="text/javascript">
    try {
        var pageTracker = _gat._getTracker("UA-266167-20");
        pageTracker._setDomainName(".martiniglesias.eu");
        pageTracker._trackPageview();
    } catch(err) {}</script>
</body>
</html>

1 respuesta 1

0

Para fijar el encabezado de la tabla, debés separar tu encabezado y cuerpo usando los nodos <thead></thead> y <tbody></tbody>. Luego, aplicás una altura específica al cuerpo, y un overflow: auto; en el css al tbody, y listo. Cuidado con el tamaño del scroll en los navegadores como IE y Firefox, pues modificarán el ancho del elemento tbody.

Te adjunto un ejemplo:

table {
  width: 400px;
}

thead, tbody {
  display: block;
  width: 100%;
}

tbody{
    max-height: 100px;
    overflow-y: auto;
}

tbody tr, thead tr {
  width: 100%;
}

tbody td, thead th {
    width: 80px;  /* Optional */
}
<table>
<thead>
<tr>
<th>Head 1</th>
<th>Head 1</th>
<th>Head 1</th>
<th>Head 1</th>
<th>Head 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
<td>Col5</td>
</tr>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
<td>Col5</td>
</tr>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
<td>Col5</td>
</tr>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
<td>Col5</td>
</tr>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
<td>Col5</td>
</tr>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
<td>Col5</td>
</tr>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
<td>Col5</td>
</tr>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
<td>Col5</td>
</tr>
</tbody>
</table>

6
  • <table class="editinplace"> <thead> <tr> <th>Cod.</th> <th>Estado</th> <th>Factura</th> <th>Cliente</th> <th>Importe MXN</th> <th>Importe DLS</th> <th>FechaFactura</th> <th>FechaContrarecibo</th> </tr> </thead> </table>
    – jasiel
    Commented el 17 oct. 2018 a las 17:02
  • { $('.editinplace').append( "<tbody><tr><td class='id'>"+json[i].id+"</td><td data-campo='estado'><span>"+json[i].estado+"</span></td><td data-campo='factura'><span>"+json[i].factura+"</s pan></td><td data-campo='cliente'><span>"+json[i].cliente+"</span></td><td data-campo='importemn'><span>"+json[i].importemn+"</span></td><td data-campo='importe_dls'><span>"+json[i].importe_dls+"</span></td><td data-campo='fechafactura'><span>"+json[i].fechafactura+"</span></td><td class='editable' data-campo='fechacontrarecibo'><span>"+json[i].fechacontrarecibo+"</span></td></tr></tbody>"); }
    – jasiel
    Commented el 17 oct. 2018 a las 17:02
  • thead,tbody tr{ display:table; width:100%; table-layout:fixed; } thead { position:fixed; top:0; }
    – jasiel
    Commented el 17 oct. 2018 a las 17:02
  • ya añadí la etiqueta <thead> <tbody> y puse en el css ese código con position fiexed pero no me sale solo se queda pegado el encabezado de la tabla
    – jasiel
    Commented el 17 oct. 2018 a las 17:04
  • Te agregué un código de ejemplo. Las partes importantes son el display: block y overflow: auto del <tbody/>.
    – Niche
    Commented el 17 oct. 2018 a las 18:14

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.