Question

如果我在 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个。

我已成功完成所有这些工作，我的问题是，如何添加滚动条到这个表，这样如果行太多，用户可以使用滚动条来检查表格内容。

Answer 1

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

Answer 2

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

但是，如果你想让你的桌子充满活力，我建议更进一步，并使用像Fixed Table Header这样的JQuery插件。

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

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

Answer 3

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

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

Answer 4

如果只想滚动x位置（水平）您可以使用 style =“ overflow-x：scroll”

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

4 个答案: