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

Я пытаюсь создать прокручиваемую таблицу с фиксированными заголовками, которые динамически заполняются. Я нашел хороший пример на этом сайте, но не смог его реализовать. Я создал скрипку здесь: http://jsfiddle.net/nokfw667/6/Как сделать таблицу прокрутки с динамическими данными

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

пример таблицы:

<Table id="ImageDataTable"> 
    <thead> 
     <tr> 
      <th style="width:140px;">Whole Nbr</div> 
      <th style="width:90px;">Type</th> 
      <th style="width:190px;">Size</th> 
      <th style="width:100px;">Revision</th> 
      <th style="width:140px;">Other Nbr</th> 
      <th style="width:90px;">Sheet Nbr</th> 
      <th style="width:190px;">Of Sheets</th> 
      <th style="width:100px;">Frame Nbr</th> 
      <th style="width:140px;">Of Frames</th> 
      <th style="width:90px;">Doc Title</th> 
      <th style="width:190px;">Note</th> 
      <th style="width:100px;">Prnt</th> 
      <th style="width:140px;">Obs</th> 
      <th style="width:90px;">Acquire Date</th> 
      <th style="width:190px;">Source</th> 
      <th style="width:100px;">Base Doc</th> 
      <th style="width:140px;">Acc Doc Nbr</th> 
      <th style="width:90px;">CommonSubDirectory</th> 
     </tr> 
    </thead> 
    <tbody id="TmageDataBody" style="overflow:scroll"> 
     <tr> 
      <td class="WholeNumberCell"></td> 
      <td class="WholeNumberCell"> 
       ST 
      </td> 
      <td class="WholeNumberCell"> 
       A 
      </td> 
      <td class="WholeNumberCell"> 
       undefined 
      </td> 
      <td class="WholeNumberCell"> 
       null 
      </td> 
      <td class="WholeNumberCell"> 
       6 
      </td> 
      <td class="WholeNumberCell"> 
       10 
      </td> 
      <td class="WholeNumberCell"> 
       1 
      </td> 
      <td class="WholeNumberCell"> 
       1 
      </td> 
      <td class="WholeNumberCell"> 
       JOGGLING OF ALUMINUM ALLOY EXTRUDED 
      </td> 
      <td class="WholeNumberCell"> 
       91179 
      </td> 
      <td class="WholeNumberCell"> 
      </td> 
      <td class="WholeNumberCell"> 
       No 
      </td> 
      <td class="WholeNumberCell"> 
       No 
      </td> 
      <td class="WholeNumberCell"> 
       0 
      </td> 
      <td class="WholeNumberCell"> 
      </td> 
      <td class="WholeNumberCell"> 
      </td> 
      <td class="WholeNumberCell"> 
       \CDVolumes 
      </td> 
     </tr> 
    </tbody> 
</Table></tbody> 
</Table>

Каждый знает, что я делаю неправильно?

источник

2015-06-25 Joe

Это неясно - вам нужно отделить свой код от рабочего примера и объяснить, как он работает. Нажатие кнопки «Собрать изображение» на скрипке показывает только временную шкалу твиттера. [Код должен быть минимальным, поддающимся проверке и конкурировать] (http://stackoverflow.com/help/mcve), который улучшает ваши навыки программирования и позволяет легче идентифицировать, где проблема. – Mousey

#ImageDataTable { 
    border: 1px solid black; 
    border-spacing: 0; 
    padding: 0; 
} 

... 

<Table id="ImageDataTable" style="overflow:scroll;">

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

Если вы хотите, чтобы ваша таблица прокручивалась, вам нужно точно определить, насколько большой стол должен быть, скажем, с div вокруг него, или указав максимальную высоту или максимальную ширину таблицы. Затем таблица отобразится в этой области и увидит, что она (скорее всего) отключена и вставляется в полосы прокрутки.

Надеюсь, это поможет.

источник

2015-07-22 15:21:17

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

ответ

Смежные вопросы