Show the number of rows and columns Javascript

Asked

Viewed 1,284 times

2

I want the user to enter the row and column quantity of a table and present the respective values entered in the table. But typing the number of rows and columns at the prompt does not display the table and values.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Untitled Document</title>

   <style>
    .verde{

        background-color: green;
    }

    .amarelo{
        background-color: yellow;

    }
</style>
 <script>



 function criaTabela(linha,coluna){

conteudo="";
conteudo += "<table border='1'>";
for (i=1;i<=linha;i++){
    conteudo += "<tr>";
    for (j=1; j<=coluna;j++){

        if(j % 2 == 0) {
        conteudo += "<div class='coluna_verde'><td>"+ i +" " + j +"</td></div>";
        }
        else{

            conteudo += "<div class='coluna_amarelo'><td>"+ i +" " + j +"</td></div>";
        }
    }           
    conteudo += "</tr>";
}   
conteudo += "</table>";
document.getElementById("tab").innerHTML=conteudo;
 }

   window.onload=function(){
    do{
         var linha=  prompt("Digite a quantidade de linha");    
        var coluna=  prompt("Digite a quantidade de coluna");   

  criaTabela(linha,coluna);


                 }while (linha != null && coluna !=null );

      console.log("linha"+linha);
       console.log("coluna"+coluna);



     }

    </script>
 </head>

 <body>


<div id="tab"></div>
</body>
</html>
javascript front-end table

  • The person has to type the number of rows and columns, and the script has to draw the table? (as lines and columns typed) ???

  • Do you want to build a <td> inside a <div>? This is totally wrong.

1 answer

2


Your code was basically correct. I changed some things:

  • taken <div class='coluna_verde'> from within the table’s HTML as it is invalid syntax. I passed the class to the td.
  • removed the do/while for it is not necessary.
  • corrected the class names. CSS and html had different names classe_verde and in CSS only verde.
  • input via prompt be converted to `Number``
  • gathered var in the loops to properly start these variables

function criaTabela(linha, coluna) {

  conteudo = "";
  conteudo += "<table border='1'>";
  for (var i = 1; i <= linha; i++) {
    conteudo += "<tr>";
    for (var j = 1; j <= coluna; j++) {

      if (j % 2 == 0) {
        conteudo += "<td class='coluna_verde'>" + i + " " + j + "</td>";
      } else {

        conteudo += "<td class='coluna_amarelo'>" + i + " " + j + "</td>";
      }
    }
    conteudo += "</tr>";
  }
  conteudo += "</table>";
  document.getElementById("tab").innerHTML = conteudo;
}

window.onload = function() {
  var linha = Number(prompt("Digite a quantidade de linha"));
  var coluna = Number(prompt("Digite a quantidade de coluna"));

  criaTabela(linha, coluna);
}
.coluna_verde {
  background-color: green;
}

.coluna_amarelo {
  background-color: yellow;
}

td {
  padding: 5px;
}
<div id="tab"></div>

Browser other questions tagged javascript front-end table

You are not signed in. Login or sign up in order to post.