在表头之上动态创建表头

Question

在this code中，我创建了多个解码器输出(D1、D2、D3...)取决于真值表中的解码器类型(4x1、8x1、16x)。

如果解码器类型是4x1，我为4个不同的解码器创建4x输出4*(D0,D1,D2,D3)。

如果解码器类型是8x1，我为2个不同的解码器创建2x输出2*(D0,D1,D2,D3,D4,D5,D6,D7)。

如果解码器类型是16x1，我会为1个解码器创建1x个输出1*(D0,D1,D2,D3,D4,D5,D6,D7,...,D15)。

现在，为了便于用户区分不同的解码器，我想将解码器名称放在相应解码器输出的顶部。例如，当我有4x1解码器时，如何在(D0,D1,D2,D3)(D0,D1,D2,D3)(D0,D1,D2,D3)(D0,D1,D2,D3)上放置headers Decoder1, Decoder2, Decoder3, Decoder4

附注:在代码中，您可以将解码器类型更改为8x1 or 16x1。它的定义如下：

var decoderType="4x1";

Answer 1

其思想是使用td标签的colspan属性。您应该将以下代码添加到generateTruthTableHTML函数中：

text += "<th class='th' colspan="+VariableCount+">Variable</td>";
for(var k = 0; k < counter; k++) {
  var count = Math.pow(2,VariableNames.length) /counter;
  text += "<th class='th' colspan=" + count + ">Decoder&nbsp;" +
          (k+1) + "</th>";
}    
text += "</tr><tr>";

Edited fiddle