Creating a scrolling html table programmatically

Question

I am fairly new to web development and have been messing around with a feature I would like to add to a webpage I am working on. I am trying to implement a scrolling table in which I build its rows, cells, and fill its content programmatically in a specific format. I have it scrolling, have built the rows/cells, and have filled it with dummy content for now, but I need some help formatting it to suit my needs.

I need to format it in the following way:

Overall, it will be a 9 wide x 60 long table in which the 1st column is all headers and the next 8 cells in the row will be data. This pattern will continue for 60 rows.

I would like the first column (left most column) to be all table headers <th> of memory addresses counting in multiples of 8 in hex (i.e. 00, 08, 10, 18, 20, ...) all the way up to 300 base 16 or (768 decimal). I would also like to divide each block of twenty rows in the table with an additional row that spans accross all 9 cells to just break it up into block 1, block 2, and block 3 sections (this would change the dimensions of the table to 9x63).

Here is what I have so far:

HTML: Set up the div and table

<div id="scrollingDiv">
    <table id="contentTable" border="1">
        <!-- Fill table programmatically -->
    </table>
</div>

CSS: Setting the div up to scroll

#scrollingDiv
{
    border: 2px groove black;
    height: 350px;
    width: 350px;
    background: #787878;
    overflow: auto;
}

#contentTable
{
    height: 350px;
    width: 350px;
}

Javascript: Building the table and filling it with dummy data

function buildTable()
{
    var memoryTable =document.getElementById("contentTable");

    var rows = new Array();
    var cells = new Array();

    for( var i = 0; i < 60; i++ )
    {
        rows[i]  = memoryTable.insertRow(i);

        for( var x = 0; x < 9; x++ )
        {
            if( x === 0) // Create header cell with memory address
            {
                cells[rows.length - 1] = rows[rows.length - 1].insertCell(x);
                cells[rows.length - 1].innerHTML = "00".bold(); // how to center this also
            }
            else // Create 8 content cells
            {
                cells[rows.length - 1] = rows[rows.length - 1].insertCell(x);
                cells[rows.length - 1].innerHTML = "\xa0";
            }
        }
    }
}

I would just do the header cell and then loop through the other 8. That removes an "if" statement that will be executed *many* times. — JerseyMike, Sep 26 '12 at 15:58

score 2 · Accepted Answer · edited May 23 '17 at 11:43

2

1) Unfortunately there is no possibility to add a th via insertCell() - you need to use the normal createElement/appendChild instead.

2) for your styling issues: You dont need to insert an additional row, you can style every 20th row accordingly - you have two possibilities depending on what browser-support you have in mind:

-> the easy but not so crossbrowser-compatible way:

tr:nth-of-type(20n){
    /*styling example, change at will*/
    border-bottom:5px solid silver;
}

-> or apply a class in your loop to every 20th row and style the class accordingly

EDIT: see your modified Example

sidenote: avoid the new Constructor wherever you can.

edited May 23 '17 at 11:43

Community

1
1

answered Sep 26 '12 at 15:22

Christoph

50,121
21
99
128

I made an edit to my post where I guess I can fake a table header by just bolding it. I like your suggesting about the styling of every 20th row, I will mess around with that. How would I go about your second suggestion of applying a class in my loop? – Joey Sep 26 '12 at 15:28
@Joey take a look at my example-fiddle. – Christoph Sep 26 '12 at 15:33
That seems to be very close to what I want, we are getting there, two things: 1. I noticed you did not create an array for all the cells. In doing it that way, how would I get a handle to those cells at a later time to put data or change the information in them? 2. Why avoid the new operator? – Joey Sep 26 '12 at 15:45
1) if you want to have a handle to every cell, you need a two-dimensional array: `cells[row][col]` - you were just overwriting them with every row. That's why I initially omitted this. But that's easy to fix. 2) It's just a matter of nice coding, you might want to read further into the link i provided. – Christoph Sep 26 '12 at 15:49
Thank you very much for all of the help, one last question: lets say I wanted to insert another cell spanning across all 9 cells (colSpan 9) rather than coloring every twenty cells, how would I go about modifying the colspan in javascript. Also, just to make sure.. when I go back later to add data to the cells how would I go about doing that, just grabbing a handle to the cells[row][col] var and iterate through it that way? – Joey Sep 26 '12 at 15:58
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/17193/discussion-between-joey-and-christoph) – Joey Sep 26 '12 at 16:11

Creating a scrolling html table programmatically

1 Answers1