How do I write js code to print serial number, odd numbers and even numbers from 1 to 100 in a tabul-CodePudding

<!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

The above is just an example of how the output should look like using 1 - 20 as a case study. The output should be in this order above but from 1 to 100.

CodePudding user response：

The problem in your code is that:

The function insertNewRow expects two arguments, but you call it with three
The serial number is given the same value (i) as the even row number (also i), while the serial number should be a different number, ... the number of the row in the output table.
There is an empty row in the initial HTML that is never populated. Just remove that from the initial HTML
Apparently you want to output 100 rows in your table, but your code only creates 50 new rows.

Some other remarks:

There is no need to pass an argument to the insertRow method: the default is that the row is appended at the end
Similarly, you can call the insertCell method in left-to-right order and omit the argument
Instead of creating text nodes, you can just assign the text to the textContent property of the td node. That way you don't even need a variable assignment for such node.
With querySelector you can select the tbody element with one method call.
There is no need to select this tbody element for each row -- it will always be the same element, so only select it once.
Instead of skipping iterations that correspond to an odd number, simplify the main loop logic, and insert a row in each iteration, but using the iteration value for the serial number, the double of that for the even column, and one less for the odd column.

This leads to the following code:

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>

CodePudding user response：

Although rather long-winded, your code will work with a few changes:

<!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>

Main changes:

I made sure your function accepts three instead of only two arguments: insertNewRow = function(i,odd,even){...}
inside the function I only use the passed parameters and not some uncertain global variables (like i and j before)
I reversed the order of your newRow.insertCell(0) statements.

A shorter version of the script could look like this:

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>