使用 appendchild 和 html table 的乘法 table

Question

谁能帮我做一个乘法 table，11x11 table 中的 0-10？我需要使用 createElement/appendchild。当我使用 document write 时，它看起来几乎完整，只是错过了蓝色 columns/rows.

的位置

它应该看起来像这样（只需要数字，不需要花哨的轮廓）：

这是我目前得到的：

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

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

您从 0 到 10 迭代两次。

使用值 0 表示顶行和第一列，其中包含要相乘的数字。由于迭代器从 0 开始，该值将为 0，您可以使用它来检测何时添加 header class 并将该值设置为您的非零迭代器，或者 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>

使用 appendchild 和 html table 的乘法 table

Multiplication table using appendchild and html table

html

javascript

appendchild

createelement