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

Если я определил пустую таблицу в моем .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.

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

9
css html javascript javascript-events jquery

3 ответов

Я бы обернул стол 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>
14

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

однако, если вы пытаетесь джазировать свои таблицы, я бы предложил сделать еще один шаг вперед и использовать плагин JQuery, такой как Исправлен Заголовок Таблицы.

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

вам также может понадобиться скрипт, который позволяет пользователям щелкнуть заголовок и отсортировать таблицу по разным столбцам. В таком случае ...--10-->фильтра поиска flexigrid может быть даже лучшим вариантом.

3

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

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

1