Me gustaría escribir una función de JavaScript que genere la siguiente tabla HTML:
| x | x^2 | 1/x | |---------------| | 1 | 1 | 1 | |---|-----|-----| | 4 | 16 | 0.25|Y aquí está mi código hasta ahora. Tengo que usar un FOR LOOP para construir y etiquetas para colocar los valores de x, x^2 y 1/x en la tabla. Está incompleto porque no estoy muy seguro de qué hacer a partir de este punto. ¡¡Cualquier ayuda sería apreciada!!
<!DOCTYPE html> <html> <head> <style> table { border: 1px solid black; width:50%; border-collapse:collapse; align:center; } th { align:center; font-weight:bold; border: 1px solid black; } </style> <script> function square(n) { var sqNum = n * n; return sqNum; } function inverse(n) { var invNum = 1 / n; return invNum; } function generateTable() { var tableMain = document.getElementById("table"); for (var i = 0; i <= 5; i++) { var x = i; var xSquare = square(i); var xInv = inverse(i) </script> </head> <body> <table id="table"> <tr bgcolor="gainsboro"> <th>x</th> <th>X<sup>2</sup></th> <th><sup>1</sup>/<sub>x</sub></th> </tr> </table> </body> <html>Use insertAdjacentHTML y un literal de plantilla para crear una fila.
generateTable(); function generateTable(n = 5) { const square = n => n * n; const inverse = n => 1 / n; const tableMain = document.querySelector("table"); for (let i = 1; i <= n; i++) { tableMain.insertAdjacentHTML( `beforeend`, `<tr><td>${i}</td><td>${square(i)}</td><td>${inverse(i).toFixed(2)}</td></tr>`) } } table { border: 1px solid black; border-collapse: collapse; text-align: center; } th, td { text-align: center; font-weight: bold; border: 1px solid black; padding: 1px 6px; } td { font-weight: normal; } <table id="table"> <tr bgcolor="gainsboro"> <th>x</th> <th>X<sup>2</sup></th> <th><sup>1</sup>/<sub>x</sub></th> </tr> </table>si algo se desea tal vez así.
function square(n){ var sqNum = n * n; return sqNum; } function inverse(n){ var invNum = 1 / n; return invNum; } function generateTable(){ var tableMain = document.getElementById("table"); for (var i = 0; i <= 5; i++){ var x = i; var xSquare = square(i); var xInv = inverse(i); var tr = document.createElement('tr'); var td1 = document.createElement('td'); var td2 = document.createElement('td'); var td3 = document.createElement('td'); td1.innerHTML = x; td2.innerHTML = xSquare; td3.innerHTML = xInv; tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); tableMain.appendChild(tr); } } generateTable(); table { border: 1px solid black; border-collapse: collapse; text-align: center; } th, td { text-align: center; font-weight: bold; border: 1px solid black; padding: 1px 6px; } td { font-weight: normal; } <table id="table"> <tr bgcolor="gainsboro"> <th>x</th> <th>X<sup>2</sup></th> <th><sup>1</sup>/<sub>x</sub></th> </tr> </table>puede ser así
-HTML- <div class="col-sm-6"> <h3>Example</h3> <div class="form-group"> <input id="myInput" type="number" value="" /> <button id="myButton">Add</button> </div> <div> <table id="myTable" class="table table-bordered"> <thead> <tr> <th>X</th> <th>X^2</th> <th>1/X</th> </tr> </thead> <tbody> </tbody> </table> </div> </div> -JS- function generateRow(rowLimit){ let myTable = document.getElementById("myTable").getElementsByTagName('tbody')[0]; myTable.innerHTML = ""; // reset row for (let i = 1; i <= rowLimit; i++){ // Insert a row let newRow = myTable.insertRow(); // Insert a cell at the new row // firstCell -> value = x let cell0 = newRow.insertCell(); cell0.innerHTML = i; // secondCell -> square = x * x let cell1 = newRow.insertCell(); cell1.innerHTML = (i * i); // lastCell -> inverse = 1 / x let cell2 = newRow.insertCell(); cell2.innerHTML = (1 / i).toFixed(3); } } document.getElementById('myButton').addEventListener("click", function(){ let myInput = document.getElementById("myInput"); let myValue = myInput.value; generateRow(myValue); });Demostración: https://jsfiddle.net/uhLwr8bz/4/
*nota: este código usa bootstrap.css