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

我对网络开发还比较陌生，一直在胡闹，我想把一个功能添加到我正在开发的网页上。我试图实现一个滚动表，在其中我以编程的方式构建它的行、单元格，并以特定的格式填充它的内容。我让它滚动，已经建立了行/单元格，现在已经用虚拟内容填充了它，但是我需要一些帮助格式化它以满足我的需要

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

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

我希望第一列（最左边的列）是所有表头

，内存地址以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>

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

函数构建表（）
{
var memoryTable=document.getElementById（“contentTable”）；
var rows=新数组（）；
var cells=新数组（）；
对于（变量i=0；i<60；i++）
{
行[i]=可记忆。插入行（i）；
对于（变量x=0；x<9；x++）
{
if（x==0）//使用内存地址创建头单元
{
单元格[rows.length-1]=行[rows.length-1].insertCell（x）；
单元格[rows.length-1].innerHTML=“00”.bold（）；//如何使其居中
}
else//创建8个内容单元格
{
单元格[rows.length-1]=行[rows.length-1].insertCell（x）；
单元格[rows.length-1].innerHTML=“\xa0”；
}
}
}
}

1）不幸的是，无法通过

insertCell（）

添加

th

-您需要使用正常的

createElement/appendChild

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

->简单但不太兼容交叉浏览器的方式：

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

->或者在循环中对每20行应用一个类，并相应地设置该类的样式

编辑：

---

旁注：尽可能避免表格标题。

我对我的帖子进行了编辑，我想我可以通过加粗来伪造表格标题。我喜欢你建议的每20排的样式，我会搞砸的。“你的第二个建议是在我的循环中应用一个类，我该怎么办？”乔伊看了看我的示例小提琴。这似乎非常接近我想要的，我们正在实现，两件事：1。我注意到您没有为所有单元格创建数组。这样做的话，我以后如何获得这些单元格的句柄，以便在其中放置数据或更改信息？2.为什么要避免使用新运算符？1）如果要对每个单元格都有一个句柄，则需要一个二维数组：

单元格[row][col]

-您只是用每一行覆盖它们。这就是为什么我最初忽略了这一点。但这很容易解决。2） 这只是一个很好的编码问题，您可能想进一步阅读我提供的链接。非常感谢您的帮助，最后一个问题：假设我想插入另一个跨越所有9个单元格的单元格（colSpan 9），而不是每20个单元格着色一次，我将如何在javascript中修改colSpan。还有，为了确保。。当我稍后返回将数据添加到单元格时，我将如何操作，只需抓取单元格[row][col]var的句柄并以这种方式进行迭代？我只需执行标题单元格，然后循环其他8个单元格。这将删除将执行多次的“if”语句。

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