Question

我正在创建一个程序，我需要创建一个2D数组，但我希望内部元素的颜色为黑色，外部元素为白色。出于某种原因，我的2D阵列不是一个盒子。它看起来像是两个连接的2D数组。我做错了什么，是否有更简单的方法来做这件事？

Picture to Explain我的问题和我正在尝试做的事情。

到目前为止，这是我的所有工作：

＆＃13;

function createTable() {
var table = document.createElement('table');
var rows = +document.getElementById('Rows').value;
var cols = +document.getElementById('Cols').value;

for(var r=0; r<rows; r++) {
  var tr = document.createElement('tr');
  table.appendChild(tr);
  for(var c=0; c<cols; c++) {
	if(r == 0 || c == 0 || r == rows - 1 ||c == cols - 1 ){ 
		var td = document.createElement('td');
		tr.appendChild(td);
		var inp = document.createElement('input');
		inp.setAttribute('type','text');
		td.appendChild(inp);
	} else {
		var tq = document.createElement('tq');
		tr.appendChild(tq);
		var inp = document.createElement('input');
		inp.setAttribute('type','text');
		tq.appendChild(inp);
	}
  }
}
var container = document.getElementById('input_container');
container.innerHTML = '';
container.appendChild(table);
}

＆＃13;

td>input {
  width: 30px;
  height: 30px;
  padding: 5px;
  font-size: 20px;
}
tq>input {
  width: 30px;
  height: 30px;
  padding: 5px;
  background-color: #000000;
  font-size: 20px;
}

＆＃13;

Rows : <input type="text" id="Rows" value="3">
Cols : <input type="text" id="Cols" value="8">
<button onclick="createTable();">Create</button>
<div id="input_container"></div>

＆＃13;

Answer 1

问题是tq不是标准HTML元素，因此无法将其识别为有效地向行添加列。因此，您最终得到同一表格列中的所有tq元素，并将所有其他列向右移动以进行补偿。

最简单的解决方案不是使用自定义元素，而是表示它与类的区别。

＆＃13;

function createTable() {
var table = document.createElement('table');
var rows = +document.getElementById('Rows').value;
var cols = +document.getElementById('Cols').value;

for(var r=0; r<rows; r++) {
  var tr = document.createElement('tr');
  table.appendChild(tr);
  for(var c=0; c<cols; c++) {
	if(r == 0 || c == 0 || r == rows - 1 ||c == cols - 1 ){ 
		var td = document.createElement('td');
		tr.appendChild(td);
		var inp = document.createElement('input');
		inp.setAttribute('type','text');
		td.appendChild(inp);
	} else {
		var tq = document.createElement('td');
		tr.appendChild(tq);
        tq.classList.add('inner');
		var inp = document.createElement('input');
		inp.setAttribute('type','text');
		tq.appendChild(inp);
	}
  }
}
var container = document.getElementById('input_container');
container.innerHTML = '';
container.appendChild(table);
}

＆＃13;

td>input {
  width: 30px;
  height: 30px;
  padding: 5px;
  font-size: 20px;
}
.inner>input {
  width: 30px;
  height: 30px;
  padding: 5px;
  background-color: #000000;
  font-size: 20px;
}

＆＃13;

Rows : <input type="text" id="Rows" value="3">
Cols : <input type="text" id="Cols" value="8">
<button onclick="createTable();">Create</button>
<div id="input_container"></div>

＆＃13;

使室内阵列与外部不同

1 个答案: