1

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";
            }
        }
    }
}
4

1 に答える 1

2

1）残念ながら、thビアを追加することはできません。代わりinsertCell()に通常を使用する必要があります。createElement/appendChild

2）スタイリングの問題について：追加の行を挿入する必要はありません。それに応じて20行ごとにスタイリングできます。考えているブラウザサポートに応じて、2つの可能性があります。

->簡単ですが、クロスブラウザと互換性のない方法：

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

->または、ループ内のクラスを20行ごとに適用し、それに応じてクラスのスタイルを設定します

編集：変更した例を参照してください

new補足：可能な限りコンストラクターを避けてください。

于 2012-09-26T15:22:59.577 に答える