2

Estou querendo que o usuário digite a quantidade linha e coluna de uma tabela e apresente os respectivos valores digitados na table.Mas ao digitar a quantidade de linhas e colunas no prompt não apresenta a table e os valores.

<!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>
2
  • A pessoa tem que digitar a quantidade de linhas e colunas, e o script tem que desenhar a table? (conforme linhas e colunas digitadas) ??? Commented 6/10/2017 às 5:12
  • Vc quer construir uma <td> dentro de uma <div>? Isto é totalmente errado.
    – Sam
    Commented 6/10/2017 às 5:20

1 Resposta 1

2

O teu código estava basicamente correto. Mudei algumas coisas:

  • tirei <div class='coluna_verde'> de dentro do HTML da tabela pois é sintaxe inválida. Passei a classe para a td.
  • removi o do/while pois não é necessário.
  • corrigi o nome das classes. O CSS e o html tinham nomes diferentes classe_verde e no CSS somente verde.
  • fiz o input via prompt ser convertido para `Number``
  • juntei var nos loops para iniciar propriamente essas variáveis

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .