如何为我的动态表格添加滚动条？

Question

如何为我的动态表格添加滚动条？

9

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

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

</table>

</body>

然后，我通过调用以下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 是从服务器获取的对象数组，该数组的长度可能超过50。

我已经成功地完成了所有工作，我的问题是，如何为这个表格添加滚动条，以便如果有太多行，用户可以使用滚动条来查看表格内容。

- Leem

4个回答

3

快速简单的答案是在父元素上使用CSS overflow:scroll;。

然而，如果你想要让你的表格更加出色，我建议你再往前迈一步，使用像Fixed Table Header这样的JQuery插件。

这样做的好处是，它意味着你可以滚动表格主体而保持标题不变，当你有大量数据需要阅读时，这会使阅读变得更加容易。

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

- Spudley

1

从用户界面的角度来看，如果表格是分页的而不是滚动的，与之交互会更容易。滚动可能会导致一些行为，使残障用户难以进行交互。点击下一页链接很容易，但滚动并非总是那么容易。

我使用网格来解决表格问题，我选择的网格是DataTables。它提供了分页、过滤、排序、订购和ajax加载内容的功能，同时还可以通过固定标题滚动。你甚至可以设置下载到Excel、PDF、打印机等，并在添加几个样式后即可实时设置。所有这些都可以用几行简单的代码设置。迄今为止，这是我用来快速向用户提供复杂数据的最佳、最快的技巧。

- bpeterson76

0

如果你想只看到水平方向的滚动条，你可以使用style="overflow-x:scroll"

- habuniaa

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Wicked Coder · Accepted Answer

我会用 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>