以编程方式创建滚动html表

Question

我对web开发还很陌生，一直在摆弄一个我想添加到我正在开发的网页中的功能。我正在尝试实现一个滚动表，在该表中，我以特定的格式以编程方式构建其行、单元格和填充其内容。我让它滚动，已经构建了行/单元格，现在已经用伪内容填充了它，但我需要一些帮助格式化以满足我的需求。

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

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

我希望第一列(最左边的列)是以十六进制(即00、08、10、18、20…)为8的倍数计数的存储器地址的所有表头<th>，一直到16进制300或(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)不幸的是，无法通过insertCell()添加th，您需要使用普通的createElement/appendChild。

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

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

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

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

编辑：查看修改后的示例

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