Javascript 如何将滚动条添加到我的动态表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6345250/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add scroll bar to my dynamic table?
提问by Leem
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-tableby invoke the following Javascript code:
然后，我通过调用以下 Javascript 代码将行和列添加到我的表中：
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>");
myArris 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 tableso that if there are too many rows, user could use scroll bar to check the table content.
我让所有这些工作都成功了，我的问题是，如何向该表格添加滚动条，以便如果行数过多，用户可以使用滚动条来检查表格内容。
回答by Wicked Coder
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>
回答by Spudley
The quick and easy answer is CSS overflow:scroll;on the parent element.
快速而简单的答案是overflow:scroll;父元素上的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.
但是，如果您想使您的表格充满活力，我建议您更进一步，并使用像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, FlexiGridmight be an even better option.
您可能还需要一个允许用户单击标题并按不同列对表格进行排序的脚本。在这种情况下，FlexiGrid可能是更好的选择。
回答by bpeterson76
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、打印机等，只需添加几项即可动态设置样式。所有这些都可以通过几行简单的代码进行设置。到目前为止，这是我用来使复杂数据快速提供给我的用户的最好、最快的技巧。
回答by habuniaa
if you want to see scroll only x position (horizantal) you can use style="overflow-x:scroll"
如果您只想查看滚动 x 位置（水平），您可以使用 style="overflow-x:scroll"
