如何在我的动态表中添加滚动条？
[英]How to add scroll bar to my dynamic table?
问题描述
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是从服务器获取的一个 object 的数组，这个数组的长度可以超过 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.我成功地完成了所有这些工作，我的问题是，如何在该表中添加滚动条，以便如果行数过多，用户可以使用滚动条检查表内容。
4 个解决方案
解决方案1
14 已采纳 2011-06-14 14:38:44
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
3 2011-06-14 14:46:29
The quick and easy answer is CSS overflow:scroll;快速简单的答案是 CSS overflow:scroll; on the parent element.在父元素上。
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 插件，例如Fixed Table Header 。
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.这样做的好处是，这意味着您可以滚动表格主体，同时保持 header 就位，这使得当您拥有大量数据时更容易阅读。
You might also want a script that allows your users to click in the header and sort the table by different columns.您可能还需要一个允许您的用户单击 header 并按不同列对表进行排序的脚本。 In that case, FlexiGrid might be an even better option.在这种情况下， FlexiGrid可能是一个更好的选择。
解决方案3
1 2011-06-14 14:41:16
From a UI standpoint, it's going to be easier to interact with a long table if it's paged, not scrolling.从 UI 的角度来看，如果长表是分页的，而不是滚动的，它会更容易与长表交互。 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.单击下一页链接很容易，但滚动并不总是那么容易。
I attack table problems using a grid, and my grid of choice is DataTables .我使用网格来解决表格问题，我选择的网格是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.它为您提供分页、过滤、排序、排序和 ajax 加载内容以及使用固定 header 滚动的机会，如果您确定使用此路线 Z34D1F91FB2E514B8576FAB1A75A89A6ZB。 You can even setup a download to excel, pdf, printer, etc and style on the fly with just a couple of additions.您甚至可以设置下载到 excel、pdf、打印机等，只需添加几项即可即时设置样式。 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.到目前为止，这是我用来让用户快速获取复杂数据的最好、最快的技巧。
解决方案4
0 2019-04-16 14:29:20
if you want to see scroll only x position (horizantal) you can use style="overflow-x:scroll"如果您只想查看滚动 x position（水平），您可以使用 style="overflow-x:scroll"
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.