Question

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

我需要按以下方式对其进行格式化：

总的来说，它将是一个9宽×60长的表，其中第一列是所有标题，行中接下来的8个单元格将是数据。此模式将持续60行。

我希望第一列（最左边的列）是内存地址的所有表头<th>，以十六进制的8的倍数计数（即00,08,10,18,20 ......）一直到300基16或（768十进制）。我还希望将表中的每一行20行划分为一个额外的行，该行跨越所有9个单元格，将其分解为块1，块2和块3部分（这会将表的维度更改为9x63）。

以下是我目前的情况：

HTML：设置div和表格

<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）遗憾的是，无法通过th添加insertCell() - 您需要使用普通的createElement/appendChild。

2）因为你的造型问题：您不需要插入额外的行，您可以相应地设置每第20行的样式 - 根据您的浏览器支持，您有两种可能性：

- ＆GT;简单但不那么与交叉浏览器兼容的方式：

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

- ＆GT;或者在你的循环中将一个类应用到每个第20行并相应地设置类的风格

编辑： see your modified Example

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

以编程方式创建滚动html表

1 个答案: