A dynamic table with JavaScript | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 1

A dynamic table with JavaScript

Hi, i am doing a function for a dynamic table in JavaScript, this table modify its depending on the amount of information that is entered, but the code not work. <!DOCTYPE html> <html> <head> <title>Prueba Tabla</title> </head> <body> <table id="Tabla" border=3></table> <script type="text/javascript"> var ES = ["Hola","Como","Estas","?"]; var EN = ["Hi","How","Are","You","?"]; var Longitud; var Texto; var Tabla = document.getElementById("Tabla"); if(ES.length >= EN.length){ Longitud = ES.lenght; } else{ Longitud = EN.lenght; } Texto = ""; for (var x = 0; x <= Longitud-1; x++) { Texto = Texto + "<tr><td>" + ES[x] + "</td><td>" + EN[x] + "</td></tr>"; } Tabla.innerHTML = Texto; </script> </body> </html> I do this example with the sentence "How are you?" in english and spanish "Como estas?". Please help. PD: Sorry if i commited a mistake, but i am learning english. 2PD: In the example I did not do a function to the table until I already had the code ready, so it makes me easier to understand it, but when it works, I make it a function.

17th Dec 2017, 10:11 PM
Emmanuel David Angarita Quintanilla
Emmanuel David Angarita Quintanilla - avatar
2 Answers
+ 2
<!--Hello! Your mistake is that you made a mistake in the word "length", you wrote "lenght" you need the opposite! Perhaps this is a critical error of your code! :) Here is the modified code, please copy it and check it :) ↓↓↓--> <!DOCTYPE html> <html> <head> <title>Prueba Tabla</title> </head> <body> <table id="Tabla" border=3></table> <script type="text/javascript"> var ES = ["Hola","Como","Estas","?"]; var EN = ["Hi","How","Are","You","?"]; var Longitud; var Texto; var Tabla = document.getElementById("Tabla"); if(ES.length >= EN.length){ Longitud = ES.length; } else{ Longitud = EN.length; } Texto = ""; for (var x = 0; x <= Longitud-1; x++) { Texto = Texto + "<tr><td>" + ES[x] + "</td><td>" + EN[x] + "</td></tr>"; } Tabla.innerHTML = Texto; </script> </body> </html>
17th Dec 2017, 10:19 PM
James16
James16 - avatar
0
Jejeje, James16 thank you very much, you were right. I do a modify for fill the espaces that have "undefined" with "". The code is this: <!DOCTYPE html> <html> <head> <title>Prueba Tabla</title> </head> <body> <table id="Tabla" border="3"></table> <script type="text/javascript"> var ES = ["Hola","Como","Estas","?"]; var EN = ["Hi","How","Are","You","?"]; var Longitud; var Texto; var Tabla = document.getElementById("Tabla"); if(ES.length >= EN.length){ Longitud = ES.length; } else{ Longitud = EN.length; } Texto = ""; for (var x = 0; x <= Longitud-1; x++) { if(ES[x] == undefined){ ES[x] = ""; } if(EN[x] == undefined){ EN[x] = ""; } Texto = Texto + "<tr><td>" + ES[x] + "</td><td>" + EN[x] + "</td></tr>"; } Tabla.innerHTML = Texto; </script> </body> </html> :D and the function is this: function DynaTable (array_1,array_2){ var Longitud; var Texto; if(array_1.length >= array_2.length){ Longitud = array_1.length; } else{ Longitud = array_2.length; } Texto = ""; for (var x = 0; x <= Longitud-1; x++) { if(array_1[x] == undefined){ array_1[x] = ""; } if(array_2[x] == undefined){ array_2[x] = ""; } Texto = Texto + "<tr><td>" + array_1[x] + "</td><td>" + array_2[x] + "</td></tr>"; } return Texto; }
18th Dec 2017, 2:58 AM
Emmanuel David Angarita Quintanilla
Emmanuel David Angarita Quintanilla - avatar