如何将滚动条添加到我的动态表？

If I defined an empty table in my index.html:

如果我在index.html中定义了一个空表：

<body>
<table width="800" border="0"  class="my-table">
     <tr>
     </tr>

</table>

</body>

Then, I add row and columns to my-table by invoke the following javascript code:

然后，我通过调用以下javascript代码将行和列添加到my-table：

var myTable = $('.my-table');

var myArr=GET_FROM_SERVER //server returns an arry of object, myArr.length>50

for(var i=0; i<myArr.length)
myTable.append("<tr id="+i+">"
                      +" <td>"+myArr[i].name+"</td>"
                      +"<td>"+myArr[i].address+"</td>"                  
           +"</tr>");

myArr is an array of object get from server, the length of this array could be more than 50.

myArr是一个从服务器获取的对象数组，该数组的长度可能超过50。

I got all of this working successfully, my question is, how can I add scroll bar to this table so that if there are too many rows, user could use scroll bar to check the table content.

我成功完成了所有这些工作，我的问题是，如何向此表添加滚动条，以便如果行数太多，用户可以使用滚动条检查表格内容。

3 个解决方案

#1

I would wrap the table with a div

我会用div包装表

<body> 

 <div style="overflow:scroll;height:80px;width:100%;overflow:auto">

    <table width="800" border="0"  class="my-table">
    <tr>      </tr>  
    </table>  

 </div>

</body>

#2

The quick and easy answer is CSS overflow:scroll; on the parent element.

快速简单的答案是CSS溢出：滚动;在父元素上。

However, if you're trying to jazz up your tables, I'd suggest going one step further, and use a JQuery plugin like Fixed Table Header.

但是，如果你试图让你的桌子充满活力，我建议更进一步，并使用像固定表头一样的JQuery插件。

The nice thing about this is that it means you can scroll the table body while keeping the header in place, which makes it much easier to read when you've got large amounts of data.

关于这一点的好处是它意味着您可以在保持标题就位的同时滚动表格主体，这使得在您拥有大量数据时更容易阅读。

You might also want a script that allows your users to click in the header and sort the table by different columns. In that case, FlexiGrid might be an even better option.

您可能还需要一个脚本，允许用户单击标题并按不同的列对表进行排序。在这种情况下，FlexiGrid可能是更好的选择。

#3

From a UI standpoint, it's going to be easier to interact with a long table if it's paged, not scrolling. Scrolling can cause some behaviors that make it difficult for users with disabilities to interact. It's easy to click a next page link, not always so easy to scroll.

从UI的角度来看，如果它被分页而不是滚动，那么与长表交互会更容易。滚动可能会导致某些行为导致残疾用户难以进行互动。点击下一页链接很容易，滚动并不总是那么容易。

I attack table problems using a grid, and my grid of choice is DataTables. It gives you paging, filtering, sorting, ordering, and ajax loading of content along with the opportunity to scroll with a fixed header if you are determined to go this route. You can even setup a download to excel, pdf, printer, etc and style on the fly with just a couple of additions. All can be setup with a few simple lines of code. By far, it's the best, quickest trick I use to make complex data quickly available to my users.

我使用网格攻击表问题，我选择的网格是DataTables。它为您提供内容的分页，过滤，排序，排序和ajax加载，以及在确定要使用此路线时使用固定标题滚动的机会。您甚至可以通过几个附加功能即时设置下载到excel，pdf，打印机等等。所有这些都可以使用几行简单的代码进行设置。到目前为止，这是我用来快速向用户提供复杂数据的最好，最快的技巧。

#1