我正在创建一个程序,我需要创建一个二维数组,但我希望内部元素的颜色为黑色,外部元素为白色。出于某种原因,我的二维数组不是一个盒子。它看起来像两个二维数组可能连接在一起。我做错了什么,有没有更简单的方法来做到这一点?
Picture to Explain我的问题和我正在尝试做的事情。
这是我到目前为止的所有工作:
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);
}
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;
}
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>
最佳答案
问题在于 tq
不是标准的 HTML 元素,因此无法将其识别为有效地向行添加列。因此,您最终会在同一表列中得到所有 tq
元素,所有其他列都向右移动以进行补偿。
最简单的解决方案是不使用自定义元素,而是用一个类来表示它的区别。
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);
}
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;
}
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>
关于javascript - 使内部阵列与外部阵列不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42235263/