如何用动态数据制作滚动表格 [英] How to make a scrolling table with dynamic data

问题描述

我试图制作一个带有固定标题的可滚动表格，它被动态地填充。我在这个网站上找到了一个很好的例子，但无法实现它。我在这里创建了一个小提琴： http://jsfiddle.net/nokfw667/6/

I am trying to make a scrollable table with fixed headers that gets dynamically populated. I have found a good example on this site but could not implement it. I have created a fiddle here: http://jsfiddle.net/nokfw667/6/

通过单击按钮填充表格，创建它的javascript已包含在返回数据的示例中。在我的例子中，我对表格进行了硬编码。小提琴的顶部是我从这个网站得到的例子。然后，我试图创建自己的，但也没有工作。

The table gets populate by clicking the button and the javascript that creates it has been included with an example of the data that gets returned. In my example I hardcoded the table. At the top of the fiddle is the example I got from this site. I then tried to create my own but that did not work either.

表格示例：

<Table id="ImageDataTable">
    <thead>
        <tr>
            <th style="width:140px;">Whole Nbr</div>
            <th style="width:90px;">Type</th>
            <th style="width:190px;">Size</th>
            <th style="width:100px;">Revision</th>
            <th style="width:140px;">Other Nbr</th>
            <th style="width:90px;">Sheet Nbr</th>
            <th style="width:190px;">Of Sheets</th>
            <th style="width:100px;">Frame Nbr</th>
            <th style="width:140px;">Of Frames</th>
            <th style="width:90px;">Doc Title</th>
            <th style="width:190px;">Note</th>
            <th style="width:100px;">Prnt</th>
            <th style="width:140px;">Obs</th>
            <th style="width:90px;">Acquire Date</th>
            <th style="width:190px;">Source</th>
            <th style="width:100px;">Base Doc</th>
            <th style="width:140px;">Acc Doc Nbr</th>
            <th style="width:90px;">CommonSubDirectory</th>
        </tr> 
    </thead>
    <tbody id="TmageDataBody" style="overflow:scroll">
        <tr>
            <td class="WholeNumberCell"></td>
            <td class="WholeNumberCell">
                 ST
            </td>
            <td class="WholeNumberCell">
                 A
            </td>
            <td class="WholeNumberCell">
                 undefined
            </td>
            <td class="WholeNumberCell">
                 null
            </td>
            <td class="WholeNumberCell">
                 6
            </td>
            <td class="WholeNumberCell">
                10
            </td>
            <td class="WholeNumberCell">
                1
            </td>
            <td class="WholeNumberCell">
                1
            </td>
            <td class="WholeNumberCell">
                JOGGLING OF ALUMINUM ALLOY EXTRUDED
           </td>
           <td class="WholeNumberCell">
                91179
           </td>
           <td class="WholeNumberCell">
           </td>
           <td class="WholeNumberCell">
                No
           </td>
           <td class="WholeNumberCell">
                No
           </td>
           <td class="WholeNumberCell">
                0
           </td>
           <td class="WholeNumberCell">
           </td>
           <td class="WholeNumberCell">
           </td>
           <td class="WholeNumberCell">
               \CDVolumes
           </td>
       </tr>
   </tbody>
</Table></tbody>
</Table>

任何人都知道我做错了什么？

Anyone know what I am doing wrong?

推荐答案

#ImageDataTable {
    border: 1px solid black;
    border-spacing: 0;
    padding: 0;
}

... 

<Table id="ImageDataTable" style="overflow:scroll;">

你已经告诉你的表，当它溢出时，它应该滚动。所以桌子愉快地占据了它需要的空间，然后看看它是否溢出 - 不！所以它不会滚动。

You've told your table that when it overflows, it should scroll. So the table happily takes up as much room as it needs, and then looks to see if it is overflowing - Nope! So it doesn't scroll.

如果你想让你的表滚动，你需要定义表格应该有多大，比如说，围绕它的div，或者通过在表格上指定最大高度或最大宽度。然后桌子会在该区域呈现自己，并且看到它（很可能）被切断，并粘在滚动条中。

If you want your table to scroll, you need to define exactly how big the table should be, say, with a div around it, or by specifying the max-height or max-width on the table. Then the table will render itself in that area and see that it (most likely) is cut off, and stick in the scrollbars.

希望这有助于。

这篇关于如何用动态数据制作滚动表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！