Таблица умножения с использованием appendchild и HTML таблицы

Question

Может ли кто-нибудь помочь мне составить таблицу умножения, 0-10 в таблице 11x11?Мне нужно использовать createElement / appendchild.Когда я использую запись документа, она выглядит почти завершенной, просто пропускаю размещение синих столбцов / строк.

Это должно выглядеть примерно так (нужны только цифры, без причудливых контуров):

Это то, что у меня так далеко:

for(var i = 0; i < 1; i++){
    var tabell1 = document.createElement("table");
    tabell.appendChild(tabell1);
    //document.write("<table>");

        for(var j = 0; j<11; j++){
            var rad = document.createElement("tr");
            tabell.appendChild("tr");
            //document.write("<tr>");

            for(var k = 1; k<=11; k++){
                var kolonne = document.createElement("td");
                tabell.appendChild(kolonne);
                kolonne.innerHTML = k*(j+1);
                
                //document.write("<td>"+ k*(j+1) +"</td>");
            }
            //document.write("</tr>");
        }
        //document.write("</table>")
}

<div id="tabell"></div>

Answer 1

Синюю рамку можно получить с помощью css.Смотри мой код.Я изменил только четыре строки цикла

function createTables(maxNum,limit){
	const table = document.createElement('table');
	for(let i = 0;i<maxNum + 1;i++){
		const row = document.createElement('tr');
		for(let j = 0;j<limit + 1;j++){
			const td = document.createElement('td');
			//Below four lines are new
			if(i === 0 && j === 0) td.innerHTML = '';
			else if(i === 0) td.innerHTML = j;
			else if(j === 0) td.innerHTML = i; 
			else td.innerHTML = i*j;
			row.appendChild(td);
		}
		table.appendChild(row)
	}
	document.body.appendChild(table)
}
createTables(10,15);

table{
	border-collapse:collapse;
}
td{
	padding:20px;
	font-size:25px;
	background-color:gray;
	border:2px solid black;
  text-align:center;
  vertical-align:center;
  color:white;
}
tr > td:nth-child(1),tr:nth-child(1) > td{
	background:blue;
}

Answer 2

Я думаю, что лучше всего использовать insertRow и insertCell

Ура!

for (var i = 0; i < 1; i++) {
    var tabell1 = document.createElement("table");
    tabell.appendChild(tabell1);

    for (var j = 0; j < 11; j++) {
        var row = tabell1.insertRow(j);

        for (var k = 0; k <= 10; k++) {
            var cell = row.insertCell(k);

            if (j == 0 && k == 0) { 
            
                //if first row and first column do nothing
                
            } else if (j == 0) { 
            
                //else if first row
                cell.innerHTML = k * (j + 1);
                
            } else if (k == 0) { 
            
                //else if first column
                cell.innerHTML = j;
                
            } else { 
            
                //else multiply
                cell.innerHTML = k * (j);
                
            }
        }
    }
}

<div id="tabell"></div>

Answer 3

Вы можете сгенерировать таблицу, используя два цикла.

Вы выполняете итерацию дважды от 0 до 10. Включено.

Используйте значение 0 для представления верхней строки и первого столбца, который содержитчисла для умножения.Поскольку итератор начинается с 0, значение будет 0, и вы можете использовать его, чтобы определить, когда добавить класс header и установить значение для ненулевого итератора, либо i, либо j:

const table = document.createElement('table');

for (let i = 0; i <= 10; i++){
  const row = document.createElement('tr');
  for (let j = 0; j <= 10; j++){
    const col = document.createElement('td');
    let val = i * j;
    if (val === 0) {
      val = i || j;
      val = val ? val : '';
      col.classList.add('header');
    }
    col.innerHTML = val;
    row.appendChild(col);
  }
  table.appendChild(row);
}

document.body.appendChild(table);

table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  padding: 3px;
  text-align: center;
}

.header {
  background: #ccf;
}