javascriptで生成されたテーブルクラス

Question

私は宿題をする必要がありますが、とてもシンプルですが、すべてが正しいですが、テーブルクラスだけは動作しません。実行されると、テーブルは表示されますが、クラスはありませんcharacteriscts境界線の色、幅など）。

どうすればこの問題を解決できますか？

function Gerar() { 
 
    if (Entrada.C.value < 0 || Entrada.C.value > 10 || Entrada.L.value < 0 || Entrada.L.value > 10) 
 
    alert("As colunas e linhas devem ser positivas e menores que 10 (dez)"); 
 
    else { 
 
    var C, L, contl = 0, 
 
     contc = 0; 
 

 
    L = Entrada.L.value; 
 
    C = Entrada.C.value; 
 

 
    document.write("<table class='Tabela'>"); 
 

 
    for (i = 0; i < L; i++) { 
 
     document.write("<tr>"); 
 

 
     contl += 1; 
 

 
     for (j = 0; j < C; j++) { 
 
     contc += 1; 
 
     document.write("<td> " + contc + "," + contl + " </td>"); 
 
     } 
 

 
     j = 0; 
 

 
     document.write("</tr>"); 
 

 
     contc = 0; 
 
    } 
 

 
    document.write("</table>"); 
 
    } 
 
}

.Tabela { 
 
    border-color: blue; 
 
    border-style: solid; 
 
    border-width: 4px; 
 
}

<form id="Entrada"> 
 
    <table> 
 
    <tr> 
 
     <td>Coluna:</td> 
 
     <td><input type="text" name="C" size="1" /></td> 
 
    </tr> 
 
    <tr> 
 
     <td>Linha:</td> 
 
     <td><input type="text" name="L" size="1" /></td> 
 
    </tr> 
 
    <tr> 
 
     <td colspan="2" align="center"><input type="button" value="Ok" onclick="Gerar();" /></td> 
 
    </tr> 
 
    </table> 
 
</form>

Answer 1

あなたは文字列にタグを書くのではなく、DOMを使用する必要があります。

だから、これはDOMベースのソリューションの一例です：

function createTable(intRows, intColomns) 
{ 
    var objTable = document.createElement("table"); 
    objTable.setAttribute("class", "Tabela") // Here goes your class to make the css work 
    for (var i = 0; i < intRows; i++) { 
     var objRow = document.createElement("tr") 
     for (var j = 0; j < intColomns; j++) { 
      var objColomn = document.createElement("td") 
      objColomn.innerHTML = j + ", " + i; 
      objRow.appendChild(objColomn); 
     } 
     objTable.appendChild(objRow); 
    } 
    document.body.appendChild(objTable); 
} 

また、あなたの「OK」ボタン

それらを一意にするために、「ID」に「名前」からの入力を変更する必要がありますでしょう

：あなたは本当にdocument.writeを（）（私はお勧めしません）あなたがインラインソリューションのために行くことができますを維持したい場合は

<input type="button" value="Ok" onclick="createTable(document.getElementById('L').value, document.getElementById('C').value);" /> 

：このような何かを見てより

document.write("<table style='border-color: blue; border-style: solid; border-width: 4px;'>"); 

代わりの

document.write("<table class='Tabela'>");