How do I show the result of a loop in a table?

Navigation
1

I am trying to make a page that shows the conversion of 1 to 10 dollars, dollar for dollar and that is printed using a while loop but inside a table, but until now I have not been successful. The code that I created goes something like this: 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>TablaDolar</title>
</head>

<body>

<table width="200" border="1">
<tbody>
<tr>
  <td>Dolares</td>
  <td>Monto</td>
</tr>
</tbody>
</table>

<script>

var monto = 0;
var dolar = 17,10;
var a = "";
var vueltas = 0;


while(vueltas < 10){

a = "<table width="200" border="1">"
+ "<tbody>"
+ "<tr>"
+ "<td>" + dolar + "</td>"
+ "<td>" + monto + "</td>"
+ "</tr>"
+ "</tbody>"
+ "</table>";

document.write(a);

vueltas ++;
dolar +;
monto ++;
}

Amount indicates the amount of dollars that are being converted dollar indicates the value of the dollar in pesos

    
asked by condor12 03.08.2017 в 19:59
source

4 answers

1

Greetings !!

You have several errors in your code, to start 17,10 you must change it by 17.10 .

You also have a typo in dolar +; , that throws an error.

If you want to use double quotes " within a string you have to escape them in this way \" or use single quotes to encapsulate it there are several options.

And lastly as Elberth Agreda said the header of the table should go outside the while.

The code stayed more or less so it would be the solution to the question you asked: 

var monto = 1;
var precioDolar = 17.10;
var pesos = monto * precioDolar;
var vueltas = 0;
var a = "";
while(vueltas < 10){
  a += "<tr>"
  + "<td>" + monto + "</td>"
  + "<td>" + pesos + "</td>"
  + "</tr>";
        
        
  vueltas ++;
  monto ++;
  dolar = vueltas;
  pesos = monto * precioDolar;
}
      
document.getElementById("resultado").innerHTML = a;
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Dolar</th>
          <th>Peso</th>
        </tr>
      </thead>
      <tbody id="resultado">
      </tbody>
    </table>
  </body>
</html>
    
answered by 03.08.2017 / 20:54
source
0

There are several errors found in your code.

  • 17,10 : misclassification of a decimals, considers the point ( . ) as decimal separator
  • dolar +; : misuse of the increment, you should consider i++;

To solve your problem would be to build the body of your table and then assign it to the tbody element, for which I put the id contenedor and through the method documento.getElementById() I look for the container and assigned it to its property innerHTML the body of your table. 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>TablaDolar</title>
</head>
<body>

<table width="200" border="1">
    <tbody id="contenedor">
    </tbody>
</table>

<script>

var monto = 0;
var dolar = 17.10; // Decimales
var a = "";
var vueltas = 0;

a += "<tr><td>Dolares</td><td>Monto</td></tr>"; // Cabecera

while(vueltas < 10){
    a += "<tr><td>" + dolar + "</td><td>" + monto + "</td></tr>";

    vueltas++;
    dolar++; // Incrementador
    monto++;
}

document.getElementById("contenedor").innerHTML = a;

</script>

</body>
</html>

References:

answered by 03.08.2017 в 21:03
0

Another way is: 

const resultados = document.getElementsByTagName("tbody")[0], dollar = 17.10; // Obtenemos el <tbody></tbody> y declaramos como constante el dólar.
var i = 1; //i de iteración 
var contenidos = [];// Creamos un array que contendrá todos los <tr> <td>iteración</td> <td>iteración * dollar</td> </tr>

while (i < 11)  //Si sólo es una instrucción en el ciclo podemos omitir los { }
    contenidos.push("<tr><td>"+i+"</td><td>"+i++*dollar+"</td></tr>"); // el i++ * dollar se incrementa la variable y a la vez se multiplica, esto permite tenerlo en una sola línea.

resultados.innerHTML = contenidos.join(""); // añadir al <tbody></tbody> los contenidos, pero como es un array está de la forma ["<tr>...</tr>", "<tr>...</tr>"] por lo que hay que unir todo en uno sólo, de ahí el join.
<table>
    <thead>
        <tr>
            <th>Dólares</th>
            <th>Monto</th>
        </tr>
    </thead>
    <tbody>
        
    </tbody>
</table>

Sometimes the += can affect the performance because for example, in the tenth iteration it would be something like this: 

<tr>......</tr>*9 = <tr>......</tr>*9 + <tr>......</tr>

That is, the nine rows are equal to the 9 rows plus another, which in reality, thanks to JS is not as much problem, but it is not like that when there are many iterations.

On the other hand when using push() you do not have to work with all the previous elements, only with the last one.

But actually for your example you can use the one that suits you the most because there is not really much problem with this performance.

    
answered by 04.08.2017 в 03:14
-2

The header of the table should be outside the while: 

<table width="200" border="1">
 <tbody>
   <tr id="result"></tr>
 </tbody>
</table>
<script>
    while(vueltas < 10){
       a = "<td>" + dolar + "</td>"
       + "<td>" + monto + "</td>";
       document.getElementById("result").innerHTML = a;
       vueltas ++;
       dolar +;
       monto ++;
     }
</script>
    
answered by 03.08.2017 в 20:19
How do I update the list of a Realtime RecyclerView when I insert a record in SQLite How to get the value of a variable in a php and use the variable in SQL statement in another php