Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,tr,td{
            border:1px solid black;
            border-collapse: collapse;
        }
        td{
            width:20px;
            height:20px;
        }
    </style>
       <script>
        function rysujtabele(){
            let tworzonatabela="";
            let ilewierszy=document.querySelector("#ilewierszy").value;
            let ilekolumn=document.querySelector("#ilekolumn").value;
            tworzonatabela+="<table>";
                   for(let i=0;i<ilewierszy;i++){
                       tworzonatabela+="<tr>"
                           for(let j=0;j<ilekolumn;j++){
                               tworzonatabela+="<td> </td>";
                           }
                           tworzonatabela+="</tr>";
                   }
                tworzonatabela+="</table>";
        document.querySelector("#tabela").innerHTML=tworzonatabela;
        document.querySelector("#kolorczerwony").textContent=(Math.round(Math.random()*255));
        document.querySelector("#kolorzielony").textContent=(Math.round(Math.random()*255));
        document.querySelector("#kolorniebieski").textContent=(Math.round(Math.random()*255));  
        }
     </script>
</head>
<body>
    <input type="number" id="ilewierszy" name="ilewierszy"> <label for="ilewierszy">podaj ilosc wierszy</label>
    <input type="number" id="ilekolumn" name="ilekolummn"> <label for="ilekolumn">podaj ilosc kolumn</label>
<input type="button" onclick="rysujtabele()" value="tworztabele">

<span id="tabela"> </span>
<span id="kolorczerwony"></span>
<span id="kolorzielony"></span>
<span id="kolorniebieski"></span>
   
</body>
</html>
Editor is loading...