Question

注意：我最初的问题是我是否应该使用<div>或<table>来执行此任务。我自己找到了一个答案：<div>在Firefox和Chrome上的速度超过两倍，如果你有2000行。因此，您必须使用<table> s。我决定重新编写我的问题来展示如何做到这一点（使用jQuery UI的可调整列和可选行的表）。希望它对任何人都有用。

我正在制作一个Web应用程序（主要用于数据输入和内部网使用）。需要以标准的方式从SQL表中呈现一些数据（行作为行，列作为列），但有一些要求：

数据以刚性格式接收为JSON数组，需要从JavaScript插入。
列必须可以调整大小。
行必须是可选择的。
正文必须可滚动，标题必须保持在上方。

对于此功能的部分，有许多现成的JavaScript组件，但最完整的是臃肿，成本高且存在错误。

由于我已经将jQuery-ui用于模态对话框和标签，我决定尝试可调整大小和可选择效果。我设法使用一些技巧使它们适用于标准HTML表格。这是代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head>
<script type='text/javascript' src='../Scripts/jQuery.js'></script>
<script type='text/javascript' src='../Scripts/jQuery-ui.js'></script>
<link href="../Css/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
<style type='text/css'>
    .selectable .ui-selecting { background: #FECA40; }
    .selectable .ui-selected { background: #F39814; color: white; }
    .NCList table { table-layout:fixed; }
    .nc-cell { overflow: hidden; white-space:nowrap; }
    .NCList .ui-resizable-e { background: gray; }
    .NCList .y-scroll { overflow-y:auto; overflow-x:hidden; }
</style>

<script type="text/javascript">
    $(function() {
        var element = $('#MyParentDiv');
        $(".selectable", element).selectable({filter: 'tr'});
        $(".th0", element).resizable({
            alsoResize: '#MyParentDiv .header-container',
            stop: function(event, ui) {
                var width1 = $(".th0", element).width();
                $('.col0', element).width(width1);
                width1 = $(".header-container", element).width();
                $('.y-scroll', element).width(width1);
            },          
            handles: 'e'});
        $(".th1", element).resizable({
            alsoResize: '#MyParentDiv .header-container',
            stop: function(event, ui) {
                var width1 = $(".th1", element).width();
                $('.col1', element).width(width1);
                width1 = $(".header-container", element).width();
                $('.y-scroll', element).width(width1);
            },          
            handles: 'e'});
    });
    </script>

</head>
<body>
    <div id="MyParentDiv" class="NCList">
        <div class="header-container" style="width:215px;">
            <table><thead><tr> 
                <th><div class="nc-cell th0" style="width:100px;"> 
                    Short name
                </div></th>
                <th><div class="nc-cell th1" style="width:100px;"> 
                    Name
                </div></th> 
            </tr></thead></table>
        </div>
        <div class="y-scroll" style="max-height:100px;width:215px;">
            <table class="valuefield"> 
                <tbody class="selectable"> 
                    <tr><td><div class="nc-cell col0" style="width: 100px">Some test values</div></td>
                        <td><div class="nc-cell col1" style="width: 100px">Some test values</div></td>
                    </tr>
                    <tr><td><div class="nc-cell col0" style="width: 100px">Some test values</div></td>
                        <td><div class="nc-cell col1" style="width: 100px">Some test values</div></td>
                    </tr>
                    <tr><td><div class="nc-cell col0" style="width: 100px">Some test values</div></td>
                        <td><div class="nc-cell col1" style="width: 100px">Some test values</div></td>
                    </tr>
                    <tr><td><div class="nc-cell col0" style="width: 100px">Some test values</div></td>
                        <td><div class="nc-cell col1" style="width: 100px">Some test values</div></td>
                    </tr>
                    <tr><td><div class="nc-cell col0" style="width: 100px">Some test values</div></td>
                        <td><div class="nc-cell col1" style="width: 100px">Some test values</div></td>
                    </tr>
                    <tr><td><div class="nc-cell col0" style="width: 100px">Some test values</div></td>
                        <td><div class="nc-cell col1" style="width: 100px">Some test values</div></td>
                    </tr>
                    <tr><td><div class="nc-cell col0" style="width: 100px">Some test values</div></td>
                        <td><div class="nc-cell col1" style="width: 100px">Some test values</div></td>
                    </tr>
                    <tr><td><div class="nc-cell col0" style="width: 100px">Some test values</div></td>
                        <td><div class="nc-cell col1" style="width: 100px">Some test values</div></td>
                    </tr>
                </tbody> 
            </table>
        </div>
    </div>
</body>
<html>

Answer 1

纯粹从语义的角度来看，您应该使用需要呈现数据的表。 DIV更适用于演示和构建页面设计。

Answer 2

如果使用jQuery.appendTo方法在所有主流浏览器上添加2000行，则DIV的速度是TABLE的两倍。所以我决定使用TABLE。

使用jQuery UI制作具有可调整大小的列和可选行的表

2 个答案: