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

How to add scroll bar to my dynamic table?

本文关键字：我的 动态 添加 滚动条      更新时间：2023-09-26

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

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

然后，我通过调用以下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>");

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

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

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

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

然而，如果你想让你的表更加生动，我建议你更进一步，使用像FixedTableHeader这样的JQuery插件。

这样做的好处是，它意味着你可以滚动表体，同时保持表头的位置，这使得当你有大量数据时更容易阅读。

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

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

我使用网格来解决表问题，我选择的网格是DataTables。它为您提供了内容的分页、过滤、排序、排序和ajax加载，如果您决心走这条路，还可以使用固定的标题滚动。您甚至可以设置下载到excel、pdf、打印机等，只需添加几项即可实现即时风格。所有这些都可以通过几行简单的代码进行设置。到目前为止，这是我用来让复杂数据快速提供给用户的最好、最快的技巧。

如果您只想查看滚动x位置（水平）你可以使用style="overflow-x:scroll"

相关文章：