Создание внутреннего массива отличается от внешнего

Question

Я создаю программу, в которой мне нужно создать 2D-массив, но я хочу, чтобы цвет элементов интерьера был черным, а внешние элементы были белыми. По какой-то причине мой 2D-массив не является полем. Похоже, что две 2D-массивы могут быть конкатенированы. Что я делаю неправильно, и есть ли еще более простой способ сделать это?

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++) { 
 
\t if(r == 0 || c == 0 || r == rows - 1 ||c == cols - 1){ 
 
\t \t var td = document.createElement('td'); 
 
\t \t tr.appendChild(td); 
 
\t \t var inp = document.createElement('input'); 
 
\t \t inp.setAttribute('type','text'); 
 
\t \t td.appendChild(inp); 
 
\t } else { 
 
\t \t var tq = document.createElement('tq'); 
 
\t \t tr.appendChild(tq); 
 
\t \t var inp = document.createElement('input'); 
 
\t \t inp.setAttribute('type','text'); 
 
\t \t tq.appendChild(inp); 
 
\t } 
 
    } 
 
} 
 
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>

Answer 1

Проблема заключается в том, что 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++) { 
 
\t if(r == 0 || c == 0 || r == rows - 1 ||c == cols - 1){ 
 
\t \t var td = document.createElement('td'); 
 
\t \t tr.appendChild(td); 
 
\t \t var inp = document.createElement('input'); 
 
\t \t inp.setAttribute('type','text'); 
 
\t \t td.appendChild(inp); 
 
\t } else { 
 
\t \t var tq = document.createElement('td'); 
 
\t \t tr.appendChild(tq); 
 
     tq.classList.add('inner'); 
 
\t \t var inp = document.createElement('input'); 
 
\t \t inp.setAttribute('type','text'); 
 
\t \t tq.appendChild(inp); 
 
\t } 
 
    } 
 
} 
 
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>