以编程方式创建滚动 html 表格

Question

我对 Web 开发相当陌生，并且一直在搞乱我想添加到我正在处理的网页中的功能。我正在尝试实现一个滚动表，我在其中构建它的行、单元格，并以特定格式以编程方式填充其内容。我让它滚动，已经构建了行/单元格，并用虚拟内容填充了它，但我需要一些帮助格式化它以满足我的需要。

我需要按以下方式格式化：

总体而言，这将是一个 9 宽 x 60 长的表格，其中第一列是所有标题，该行中接下来的 8 个单元格将是数据。这种模式将持续 60 行。

我希望第一列（最左边的列）是所有表头 <th> 的内存地址，以十六进制的 8 的倍数计数（即 00、08、10、18、20，...）最多 300 基 16 或（768 十进制）。我还想将表格中 20 行的每个块与跨越所有 9 个单元格的附加行分开，将其分成块 1、块 2 和块 3 部分（这会将表格的尺寸更改为9x63)。

这是我目前所拥有的：

HTML：设置 div 和 table

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

CSS：设置 div 向上滚动

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

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

Javascript：构建表格并用虚拟数据填充它

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

Answer 1

1) 很遗憾，无法通过insertCell() 添加th - 您需要改用普通的createElement/appendChild。

2) 对于您的样式问题： 您不需要插入额外的行，您可以相应地设置每 20 行的样式 - 您有两种可能性，具体取决于您考虑的浏览器支持：

-> 简单但不那么跨浏览器兼容的方式：

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

-> 或将循环中的类应用于每 20 行并相应地设置类的样式

编辑：see your modified Example

旁注：尽可能避免使用new Constructor。