Question

我决定为具有静态标头和可滚动tbody（使用Jquery）的表编写自己的标记，因此我决定使用div编写自己的标记。

以下是两个问题：

给出任何选择x行的查询，它会在两行上打印结果集，因此可能发生计数错误
当我们谈论大量的数据，大量的DOM元素，使用一些静态标记时，这个标记非常慢，没关系，但是当我应该从数据库中获取它时，它是落后很多

我想知道你们是否有想法，几天的搜索让我失望

代码如下：

<?php include("connect.inc.php"); ?>

<html>

<head>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

    <script>

        $(document).ready(function()
        {
        $(".thead").scroll(function () { 
                $(".tbody").scrollLeft($(".thead").scrollLeft());
            });
        $(".tbody").scroll(function () { 
                $(".thead").scrollLeft($(".tbody").scrollLeft());
            });
        });

    </script>

</head>

<body>

<?php

    /* $syntax = ANY USUAL MYSQL SELECT QUERY, EVEN A JOIN */

    $query  = mysql_query($syntax) or die(mysql_error());
    $cols   = mysql_num_fields($query)+1;
    $td_w   = 150;  $tr_w = $cols*$td_w;    /* td_width default 150px :) */

?>

<style type="text/css">

*   {

    font-size:12px;
    font-family:verdana;

}

/* defines table wrap, max width and height */

.tbl_wrap   {

    width:800px;
    height:400px;

}

/* inner wrapper */

.tbl    {

    width:100%;
    height:100%;

}

.thead {

    height:35px;
    overflow:hidden;

}

.tbody {

    height:400px;
    overflow:auto;

}

/* defines table row and table header settings */

.th,.tr {

    width:<?=$tr_w."px"?>;
    display:block;
    clear:both;
    height:35px;

}

/* optional settings for th */

.th {

    background-color: rgb(220,220,220);
    font-weight: bold;
    border-bottom:1px solid black;

}

/* cell element styling */

.td {

    float:left; 
    display:inline;
    width:<?=$td_w."px"?>;
    height:35px;
    overflow:auto;
    border: 1px solid rgb(250,250,250);

}

</style>    

<div class='tbl_wrap'>

    <div class='tbl'>

        <div class='thead'>

            <div class='th'>

            <?php

                for($i=0; $i<mysql_num_fields($query);$i++) 
                echo "<div class='td'>".mysql_field_name($query,$i)."</div>";

            ?>

            </div>

        </div>

        <div class='tbody'>

        <?php
        while($res = mysql_fetch_assoc($query))     {
            /* If two or more columns of the result have the same field names, the last column will take precedence. */
            echo "<div class='tr'>";
            for($i=0; $i<mysql_num_fields($query);$i++) echo "<div class='td'>".$res[mysql_field_name($query,$i)]."</div>\n";
            echo "</div>\n";    
        }
        ?>

        </div>

    </div>

</div>

</body>

</html>

<?php include("close.inc.php");

感谢你和那个可以为这个烂摊子提供解释的人的荣誉。

Answer 1

你不需要使用div来获得可滚动的身体，你可以这样做

<强> CSS

table tbody { overflow: scroll; height: 200px; }

<强> HTML

<table>
   <thead>
      .... your head items
   </thead>
   <tbody>
     ... your body items
   </tbody>
</table>

这不适用于旧浏览器，所以要小心。

Answer 2

我实际上最终做了这个

    <script>

    $(function () {
        $(".edt").click(function (event) {
            $(this).editable('ajax_save.php?table=date_vpn',{
                id      : 'id',
                name        : $(this).attr('col'),
                submit      : 'Save',
                cancel      : 'Cancel',
                tooltip     : ''
            });
        });
    });     


    $(document).ready(function(){
        $(".tblh_wrap").scroll(function () { 
                $(".tblb_wrap").scrollLeft($(".tblh_wrap").scrollLeft());
        });
        $(".tblb_wrap").scroll(function () { 
                $(".tblh_wrap").scrollLeft($(".tblb_wrap").scrollLeft());
        });
    });

    </script>

</head>

<body>

<?php

    $syntax = 'your usual mysql query';

    $query  = mysql_query($syntax) or die(mysql_error());
    $cols   = mysql_num_fields($query);
    $td_w   = 150;  $tr_w = $cols*$td_w;    /* td_width default 150px :) */

?>

<style type='text/css'>

    table   {

        width           :100%;
        table-layout    :fixed;

    }

    tr      {

        width           :<?=$tr_w."px"?>

    }

    td      {

        width           :<?=$td_w."px"?>;
        overflow        :hidden;
        white-space     :nowrap;

    }

    .tblh_wrap  {

        width           :1000px;
        overflow        :hidden;

    }

    .tblb_wrap  {

        height          :500px;
        width           :1000px;
        overflow        :auto;

    }       

</style>

<div class='tblh_wrap'>

<table>

        <tr>
        <?php

            for($i=0; $i<mysql_num_fields($query);$i++) 
            echo "<td>".mysql_field_name($query,$i)."</td>";

        ?>
        </tr>

</table>

</div>

<div class='tblb_wrap'>

<table>

        <?php

        while($res = mysql_fetch_assoc($query))     {
            /* If two or more columns of the result have the same field names, the last column will take precedence. */
            echo "<tr>";
            for($i=0; $i<mysql_num_fields($query);$i++) echo "<td class='edt' id='' col=''>".$res[mysql_field_name($query,$i)]."</td>\n";
            echo "</tr>\n"; 
        }

        ?>

</table>

</div>

我的解决方案有效，因为它是一个带有固定标题的表，水平可滚动和tbody内容，它与标题水平同步并具有垂直滚动功能，使用jquery，常规html和php

由<div>组成的表非常慢</div>

2 个答案: