<!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> | PRODUCCIÓN | |
|---|---|
| S/N | Incluso |
| :-------- | -------: |
| 1 | 2 |
| 2 | 4 |
| 3 | 6 |
| 4 | 8 |
| 5 | 10 |
| 6 | 12 |
| 7 | 14 |
| 8 | dieciséis |
| 9 | 18 |
| 10 | 20 |
Lo anterior es solo un ejemplo de cómo debería verse la salida usando 1 - 20 como un caso de estudio. La salida debe estar en este orden anterior pero de 1 a 100.
Aunque es bastante extenso, su código funcionará con algunos cambios:
<!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>Principales cambios:
insertNewRow = function(i,odd,even){...}i y j antes)newRow.insertCell(0) .Una versión más corta del script podría verse así:
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>El problema en tu código es que:
insertNewRow espera dos argumentos, pero la llama con tresi ) que el número de fila par (también i ), mientras que el número de serie debe ser un número diferente, ... el número de la fila en la tabla de salida.Algunas otras observaciones:
insertRow : el valor predeterminado es que la fila se agrega al finalinsertCell en orden de izquierda a derecha y omitir el argumentotextContent del nodo td . De esa manera, ni siquiera necesita una asignación de variable para dicho nodo.querySelector puede seleccionar el elemento tbody con una llamada de método.tbody para cada fila; siempre será el mismo elemento, así que solo selecciónelo una vez.Esto conduce al siguiente código:
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>