Как добавить полосу прокрутки к моей динамической таблице? - PullRequest
Новая
       0

Как добавить полосу прокрутки к моей динамической таблице?

9 голосов
/ 14 июня 2011

Если я определил пустую таблицу в моем index.html : 

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

</table>

</body>

Затем я добавляю строку и столбцы в my-table , вызывая следующий код 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.

У меня все это работает успешно, мой вопрос, как я могу добавить полосу прокрутки к этой таблице , чтобы при наличии слишком большого количества строк пользователь мог использовать полосу прокрутки для проверки содержимого таблицы.

Ответы [ 4 ]

14 голосов
/ 14 июня 2011

Я бы обернул таблицу 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>
3 голосов
/ 14 июня 2011

Быстрый и простой ответ - CSS overflow:scroll; на родительском элементе.

Однако, если вы пытаетесь подбодрить ваши таблицы, я бы предложил пойти еще дальше и использовать JQuery.плагин, такой как Fixed Table Header .

Приятно то, что это означает, что вы можете прокручивать тело таблицы, сохраняя заголовок на месте, что значительно облегчает чтение приВы получили большие объемы данных.

Возможно, вам также понадобится скрипт, позволяющий пользователям щелкать заголовок и сортировать таблицу по различным столбцам.В этом случае FlexiGrid может быть даже лучшим вариантом.

1 голос
/ 14 июня 2011

С точки зрения пользовательского интерфейса будет проще взаимодействовать с длинной таблицей, если она перемещается, а не прокручивается.Прокрутка может привести к тому, что пользователям с ограниченными возможностями будет трудно взаимодействовать.Легко щелкнуть ссылку на следующую страницу, не всегда так просто прокрутить.

Я атакую ​​таблицы с помощью сетки, и моя сетка выбора DataTables .Это дает вам пейджинг, фильтрацию, сортировку, упорядочивание и загрузку контента ajax вместе с возможностью прокрутки с фиксированным заголовком, если вы решили пойти по этому пути.Вы даже можете настроить загрузку в Excel, PDF, принтер, и т. Д. И стиль на лету с помощью всего лишь нескольких дополнений.Все можно настроить с помощью нескольких простых строк кода.Безусловно, это лучший и самый быстрый прием, который я использую для быстрого доступа к сложным данным для моих пользователей.

0 голосов
/ 16 апреля 2019

если вы хотите видеть прокрутку только на x позицию (по горизонтали), вы можете использовать style = "overflow-x: scroll"

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...