如何编写js代码以表格形式打印1到100的序号、奇数和偶数？

Question

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>S/N</th>
<th>Odd</th>
<th>Even</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<script>
var insertNewRow = function(even, odd){
  var tableRef =  document.getElementById('myTable').getElementsByTagName('tbody')[0];
  var newRow = tableRef.insertRow(tableRef.rows.length);
  var serialNum = newRow.insertCell(0);
  var evenCell = newRow.insertCell(0);
  var oddCell = newRow.insertCell(0);
  var serialNumber = document.createTextNode(i);
  var evenNumber = document.createTextNode(i);
  var OddNumber = document.createTextNode(j);
  serialNum.appendChild(serialNumber); 
  evenCell.appendChild(evenNumber);
  oddCell.appendChild(OddNumber);
}
for(i = 1 ; i <= 100 ; i ++){
  if(i % 2 == 0){    
    var j = i -1;
    insertNewRow( i, i, j)
  } 
}
</script>
</body>
</html>

OUTPUT
S/N	Even
:--------	-------:
1	2
2	4
3	6
4	8
5	10
6	12
7	14
8	16
9	18
10	20

以上只是使用 1 - 20 作为案例研究的输出结果示例。输出应按上述顺序但从 1 到 100。

Answer 1

虽然 long-winded，但您的代码只需做一些更改即可工作：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>S/N</th>
<th>Odd</th>
<th>Even</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<script>
var insertNewRow = function(i,odd,even){
  var tableRef =  document.getElementById('myTable').getElementsByTagName('tbody')[0];
  var newRow = tableRef.insertRow(tableRef.rows.length);
  var oddCell = newRow.insertCell(0);
  var evenCell = newRow.insertCell(0);
  var serialNum = newRow.insertCell(0);
  var serialNumber = document.createTextNode(i);
  var evenNumber = document.createTextNode(even);
  var OddNumber = document.createTextNode(odd);
  serialNum.appendChild(serialNumber);
  oddCell.appendChild(OddNumber);
  evenCell.appendChild(evenNumber);
}
for(let i = 1 ; i <= 100 ; i ++){
  if(i % 2 == 0){    
var j = i -1;
insertNewRow( i, i, j)
  } 
}
</script>
</body>
</html>

主要变化：

我确保你的函数接受三个而不是两个参数：insertNewRow = function(i,odd,even){...}
函数内部我只使用传递的参数，不使用一些不确定的全局变量（比如之前的i和j）
我颠倒了你的 newRow.insertCell(0) 语句的顺序。

脚本的较短版本可能如下所示：

for (var arr=[],i=1;i<100;i+=2)
arr.push(`<tr><td>${i}:</td><td>${i}</td><td>${i+1}</td></tr>`);
document.querySelector("tbody").innerHTML=arr.join("\n");

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>S/N</th>
<th>Odd</th>
<th>Even</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

Answer 2

您的代码中的问题是：

函数 insertNewRow 需要两个参数，但您用三个参数调用它
序列号被赋予与偶数行号相同的值（i）（也i），而序列号应该是不同的数字，...输出中的行 table.
初始 HTML 中有一个从未填充的空行。只需将其从初始 HTML
显然您想在 table 中输出 100 行，但您的代码只创建了 50 行。

一些其他备注：

不需要向insertRow方法传递参数：默认是行追加在末尾
同样，可以按left-to-right顺序调用insertCell方法，省略参数
无需创建文本节点，您只需将文本分配给 td 节点的 textContent 属性。这样你甚至不需要为这样的节点分配变量。
使用 querySelector 您可以 select 一个方法调用 tbody 元素。
不需要为每一行 select 这个 tbody 元素 -- 它总是相同的元素，所以只 select 它一次。
不是跳过对应奇数的迭代，而是简化主循环逻辑，在每次迭代中插入一行，但是使用迭代值作为序号，even 列，odd 列少一列。

这导致以下代码：

let tableRef =  document.querySelector('#myTable > tbody');

for (let rowNumber = 1 ; rowNumber <= 100; rowNumber++) {
  let newRow = tableRef.insertRow();
  newRow.insertCell().textContent = rowNumber;         // serial
  newRow.insertCell().textContent = rowNumber * 2 - 1; // odd
  newRow.insertCell().textContent = rowNumber * 2;     // even
}

table { border-collapse: collapse }
td, th { border: 1px solid; text-align: right}
td:nth-child(2) { background: pink }
td:last-child { background: lightblue }

<table id="myTable">
  <thead>
    <tr>
      <th>S/N</th>
      <th>Odd</th>
      <th>Even</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

如何编写js代码以表格形式打印1到100的序号、奇数和偶数？

How do I write js code to print serial number, odd numbers and even numbers from 1 to 100 in a tabular form?

javascript