td大小影响其他行中的其他tds

Question

我有一张表，第一行是2个单元格， 第二个是3。 第一个单元格（[0,0]）是一个文本框，所有其他单元格都是按钮。 对于此代码：

var tr0 = document.createElement('TR'); //the first row
table.appendChild(tr);

var td0 = document.createElement('TD');
tr1.appendChild(td0);
var textbox = document.createElement('INPUT');
textbox.setAttribute('TYPE', 'text');
td0.appendChild(textbox);

var td1= document.createElement('TD');
tr0.appendChild(td1);
var clear = document.createElement('INPUT');
clear.setAttribute('TYPE', 'button');
clear.setAttribute('VALUE', 'C');
td1.appendChild(clear);

var tr1 = document.createElement('TR'); //the second row
table.appendChild(tr1);

var td1_0 = document.createElement('TD');
tr1.appendChild(td1_0);
var one = document.createElement('INPUT');
one.setAttribute('TYPE', 'button');
one.value='1';
td1_0.appendChild(one);


var td1_1 = document.createElement('TD');
tr1.appendChild(td1_1);
var two = document.createElement('INPUT');
two.setAttribute('TYPE', 'button');
two.value='2';
td1_1.appendChild(two);

var td1_2 = document.createElement('TD');
tr1.appendChild(td1_2);
var three = document.createElement('INPUT');
three.setAttribute('TYPE', 'button'); 
three.value='3';
td1_2.appendChild(three);

我得到：

我想知道原因以及如何在javascript中修复它，不能使用JQuery，它必须在js文件中。 tnx提前！

Answer 1

似乎您的问题是由每行的列数差异引起的。

colspan属性将两个或多个列连接到一个。

在此处查看差异：https://jsfiddle.net/80LLkr9g/1/。

我想你的代码应该是这样的：

var td0 = document.createElement('TD');
td0.setAttribute('colspan', '2');
tr1.appendChild(td0);

Answer 2

如果你想要一切并排，你不需要为每个输入创建新的表格单元格。只需将每个按钮放在同一个单元格中即可。

var tr0 = document.createElement('TR'); //the first row
table.appendChild(tr0);

var td0 = document.createElement('TD');
tr0.appendChild(td0);
var textbox = document.createElement('INPUT');
textbox.setAttribute('TYPE', 'text');
td0.appendChild(textbox);

var clear = document.createElement('INPUT');
clear.setAttribute('TYPE', 'button');
clear.setAttribute('VALUE', 'C');
td0.appendChild(clear);

var tr1 = document.createElement('TR'); //the second row
table.appendChild(tr1);

var td1 = document.createElement('TD');
tr1.appendChild(td1);
var one = document.createElement('INPUT');
one.setAttribute('TYPE', 'button');
one.value='1';
td1.appendChild(one);


var two = document.createElement('INPUT');
two.setAttribute('TYPE', 'button');
two.value='2';
td1.appendChild(two);

var three = document.createElement('INPUT');
three.setAttribute('TYPE', 'button'); 
three.value='3';
td1.appendChild(three);

您会注意到现在只有两个TD元素（td0和td1），您的输入元素（文本框和按钮）都会附加到其中一个元素。您也可以将这些放入div元素而不是表格中，但这取决于您：）

例如

var div0 = document.createElement('div'); //the first row
var textbox = document.createElement('INPUT');
textbox.setAttribute('TYPE', 'text');
div0.appendChild(textbox);