使用appendchild和html表的乘法表

Question

有人可以帮我在11x11表格中制作一个乘法表（0-10）吗？ 我需要使用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

您可以使用两个循环来生成表。

您从0到10进行了两次迭代。

使用值0代表您的第一行和第一列，其中包含要相乘的数字。由于迭代器从0开始，因此该值将为0，您可以使用该值检测何时添加header类并将该值设置为非零迭代器i或{{1 }}：

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);

Answer 2

蓝色边框可以通过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 3

我认为最好使用inserRow和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>