Login | Register | FAQ
Anonymous

Scrolling table

+ Post a reply

1 post Page 1 of 1


Scrolling table

by JohnM » Fri Jun 26, 2015 7:45 pm

Hello

I am trying to make a scrolling table and I am having problems. I tried following this example http://www.imaputz.com/cssStuff/bigFourVersion.html but could not get it to work. It looks like this http://jsfiddle.net/bwdc78tr/. The only way I could get it to scroll was by hardcoding the height but my columns do not line up. I tried changing the "display:block" to "display: table-row-group" from a suggestion I got somewhere else but now I can not get the scrollbars to appear. Here is an example of the change http://jsfiddle.net/bwdc78tr/1/.

All the help I find on the net has simple examples and I can't seem to find anything that explains the behavior that I am seeing. Any suggestions or links to read would be appreciated.

The actual project I am working on is more complex than the fiddle. Specifically the table is build from javascript based on a JSON from a php file. Just in case it may provide some clues I am including the javascript.
Code: Select all
      function gatherImageData(id)
      {
         var acquireDate;
         var acquireDateObj;
         var imageData;


         try {
            hideDropdown();
            //alert("build table for " + id);
            imageData = GetData('image', id);

            var table = document.getElementById("TmageDataBody");

            //Clear any prior data
            while(table.rows.length > 0) {
               table.deleteRow(0);
            }

            for (var r in imageData) {
               var newRow = table.insertRow(table.rows.length);
               newRow.onclick = function () { displayImage(imageData[r].WholeNumber); };
               acquireDate = JSON.parse(JSON.stringify(imageData[r].AcquireDate)).date.slice(0,10);
               createImageCell(newRow, 0, imageData[r].WholeNumber, '170');
               createImageCell(newRow, 1, imageData[r].Type, '50');
               createImageCell(newRow, 2, imageData[r].Size, '50');
               createImageCell(newRow, 3, imageData[r].Revision, '100');
               createImageCell(newRow, 4, imageData[r].OtherNumber, '100');
               createImageCell(newRow, 5, imageData[r].SheetNumber, '50');
               createImageCell(newRow, 6, imageData[r].SheetsTotal, '50');
               createImageCell(newRow, 7, imageData[r].FrameNumber, '50');
               createImageCell(newRow, 8, imageData[r].FramesTotal, '50');
               createImageCell(newRow, 9, imageData[r].DocumentTitle, '250');
               createImageCell(newRow, 10, imageData[r].Volume, '100');
               createImageCell(newRow, 11, imageData[r].Note, '50');
               createImageCell(newRow, 12, imageData[r].Print, '50');
               createImageCell(newRow, 13, imageData[r].Obs, '50');
               createImageCell(newRow, 14, acquireDate, '100');
               createImageCell(newRow, 15, imageData[r].Source, '150');
               createImageCell(newRow, 16, imageData[r].BaseDoc, '100');
               createImageCell(newRow, 17, imageData[r].AccDocNbr, '100');
               createImageCell(newRow, 18, imageData[r].CommonSubDirectory, '100');
            }
         }
         catch (err) {
            alert(err.message);
         }

      }

      function createImageCell(row, index, data, cellWidth)
      {

         var newCell  = row.insertCell(index);
         var newText  = document.createTextNode(data);
         newCell.appendChild(newText);
         //newCell.innerHTML = data;
         newCell.className = "ImageDataCell";
         newCell.width = cellWidth + 'px';

      }
User avatar

JohnM

  • Posts: 1
  • Joined: Fri Jun 26, 2015 7:36 pm


+ Post a reply

Page 1 of 1