使用的appendChild和HTML表乘法表

Question

谁能帮我做一个乘法表，0-10在11×11的表？我需要使用的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开始，该值是零，你可以用它来检测何时添加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;
}

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>