1

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

1 回答 1

2

1) 不幸的是，不可能添加一个过th孔insertCell()——你需要使用普通的createElement/appendChild。

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

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

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

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

编辑：查看您修改后的示例

旁注：尽可能避免使用new构造函数。

于 2012-09-26T15:22:59.577 回答