<!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.
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:
insertNewRow = function(i,odd,even){...}
i
and j
before)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>
The problem in your code is that:
insertNewRow
expects two arguments, but you call it with threei
) 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.Some other remarks:
insertRow
method: the default is that the row is appended at the endinsertCell
method in left-to-right order and omit the argumenttextContent
property of the td
node. That way you don't even need a variable assignment for such node.querySelector
you can select the tbody
element with one method call.tbody
element for each row -- it will always be the same element, so only select it once.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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.