CODEWITHSUNDEEP
javascripthtmlcssarrays
Jason
Jason

Reputation: 23

Making Interior Array Different from Exterior

I am creating a program where I need to have a to create a 2D array, but I want the color of the interior elements to be black, and the exterior elements to be white. For some reason, my 2D array isn't a box. It looks like two 2D arrays concatenated maybe. What am I doing wrong, and is there an even easier way to go about doing this?

Picture to Explain my issues and what I am attempting to do.

Here is all my work thus far:

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>

Upvotes: 0

Views: 23

Answers (1)

lonesomeday
lonesomeday

Reputation: 237865

The problem is that tq is not a standard HTML element, so it is not recognised as effectively adding a column to the row. So you end up with all the tq elements in the same table column, with all the other columns shifted right to compensate.

The easiest solution is not to use the custom element but to signify its difference with a class.

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>

Upvotes: 1

Related Questions