Question

我遇到了一些问题/困惑，我不知道从哪里开始。

我正在尝试使用Javascript为我的数据创建表格，然后以HTML格式显示它们。我创建了没有戏剧的HTML表格，但是我遇到了麻烦的JS。

这是我预期输出的图片：

从这里开始，我有以下代码来绘制表格。但是，在我遇到如何完成表格之前，我只能达到第7排。

我已阅读了很多参考资料，但我无法弄明白该怎么做！

到目前为止，这是我的代码：

function drawTable3() {
  var input = document.createElement("input");
  var tr = document.createElement("tr");
  var td = document.createElement("td");

  var div = document.getElementById("dropper")

  //create table
  var drawTable = document.createElement("table");
  drawTable.id = "dropperTable";
  drawTable.className = "tg";
  div.appendChild(drawTable);

  var table = document.getElementById("dropperTable");	

  var input = document.createElement("input");
  input.id = "D" + [i] + "Size";
  input.type = "number";


  //Create Head Elements
  for ( var i = 0; i < 3; i++ ) {
    var createHead = document.createElement("th");
    if ( i == 0) {
      createHead.innerHTML = "";
    } else if ( i == 1) {
      createHead.innerHTML = "Dropper Duct Size";
    } else if ( i == 2) {
      createHead.innerHTML = "Dropper Duct Capacity";
    }
    table.appendChild(createHead);
  }	

  for ( var i = 1; i < 7 ; i++ ) {

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var cell1 = row.insertCell(0);
    var dropperName = document.createElement("output");
    dropperName.id = "D" + [i] + "Size";
    dropperName.innerHTML = "Dropper Duct Side " + [i];
    cell1.appendChild(dropperName);		

    var cell2 = row.insertCell(1);
    var dropperInput = document.createElement("input");
    dropperInput.type = "number";
    dropperInput.id = "D" + [i] + "Capacity";
    cell2.appendChild(dropperInput);

    var cell3 = row.insertCell(2);
    var dropperOutput = document.createElement("output");
    dropperOutput.id = "D" + [i] + "Capacity";
    cell3.appendChild(dropperOutput);	

  }

}

drawTable3();

.tg  {
	border-collapse:collapse;
	border-spacing:0;
	text-align: center;
	}
	
.tg td{
	font-family:Arial, sans-serif;
	font-size:14px;
	font-weight:normal;
	padding:10px 5px;
	border-style:solid;
	border-width:1px;
	overflow:hidden;
	word-break:normal;
	text-align: center;
	}
	
.tg th{
	font-family:Arial, sans-serif;
	font-size:14px;
	font-weight:normal;
	padding:10px 5px;
	border-style:solid;
	border-width:1px;
	overflow:hidden;
	word-break:normal;
	text-align: center;
	vertical-align: top;
	}
.tg .tg-s6z2{
	text-align:center
	}
	
.smallInput {
	width: 50px;
	text-align: center;
	}
.roomIdent {

}

.factors {
text-align: center;
width: 80px;
}

.factors2 {
text-align: center;
width: 150px;
}
.tg2 {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #FFF;
	border-right-color: #FFF;
	border-bottom-color: #FFF;
	border-left-color: #FFF;
}

<div id="dropper"></div>

Answer 1

对您的代码的一些评论：

function drawTable3() {
  var input = document.createElement("input");
  var tr = document.createElement("tr");
  var td = document.createElement("td");

tr 和 td 不在任何地方使用， input 稍后会重新初始化。

var div = document.getElementById("dropper") //create table var drawTable = document.createElement("table"); drawTable.id = "dropperTable"; drawTable.className = "tg"; div.appendChild(drawTable); var table = document.getElementById("dropperTable");

您已经将表格引用为 drawTable ，那么为什么不从头开始称它为 table ？无论如何，上述内容相当于：

var table = drawTable;

。

var input = document.createElement("input");

您已经在上面创建了一个输入并将其分配给输入，这会将其替换为另一个输入。

input.id = "D" + [i] + "Size";
尚未为
i 分配一个值（它被声明为较低，因此它作为变量存在），因此其值为 undefined 。表达式[i]将创建数组[undefined]，然后将其转换为字符串，因为+运算符和表达式中的其他值为字符串，返回空字符串。所以分配的ID是：

'DSize'

。 input.type =“number”;

//Create Head Elements for ( var i = 0; i < 3; i++ ) { var createHead = document.createElement("th"); if ( i == 0) { createHead.innerHTML = ""; } else if ( i == 1) { createHead.innerHTML = "Dropper Duct Size"; } else if ( i == 2) { createHead.innerHTML = "Dropper Duct Capacity"; } table.appendChild(createHead); }

如果您对值使用数组并根据 i 的值分配它们，则上述内容可能会更简洁一些。此外，如果您只是设置文本值，可能最好插入文本节点：

var headCellValues = ['','Dropper Duct Size','Dropper Duct Capacity']; for ( var i = 0; i < 3; i++ ) { var createHead = document.createElement("th"); createHead.appendChild(document.createTextNode(headCellValues[i])); table.appendChild(createHead); }

for ( var i = 1; i < 7 ; i++ ) { var rowCount = table.rows.length; var row = table.insertRow(rowCount);

这似乎是唯一使用 rowCount 的地方。要使用 insertRow 附加行，请提供值-1：

var row = table.insertRow(-1);

var cell1 = row.insertCell(0); var dropperName = document.createElement("output"); dropperName.id = "D" + [i] + "Size";

再次，[1]创建一个数组，然后将其转换为字符串。只需使用 i 来说出“D0Size”：

dropperName.id = "D" + i + "Size";

dropperName.innerHTML = "Dropper Duct Side " + [i];

同样，使用：

dropperName.innerHTML = "Dropper Duct Side " + i; dropperName.appendChild(document.createTextNode("Dropper Duct Side " + i));

同样应该应用于其余代码。您可以考虑克隆整行，因为它比逐个创建所有元素更快，或者创建单独的函数来创建每种类型的行。看起来页眉和页脚部分可能是HTML，只需要动态创建插入的行。

cell1.appendChild(dropperName); var cell2 = row.insertCell(1); var dropperInput = document.createElement("input"); dropperInput.type = "number"; dropperInput.id = "D" + [i] + "Capacity"; cell2.appendChild(dropperInput); var cell3 = row.insertCell(2); var dropperOutput = document.createElement("output"); dropperOutput.id = "D" + [i] + "Capacity"; cell3.appendChild(dropperOutput); } } drawTable3();

创建表混淆

1 个答案: