123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657 | <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> </head> <body> <input type="number" id="n"><br> <input type="button" value="2" onclick="tablica2()"><input type="button" value="3" onclick="tablica3()"><br><p id="ds"></p><p id="ds1"></p> <style> td{ border: solid 1px #000; } </style> <script> let n = document.getElementById("n").value; let k = 0; let l = 1; let p = 0; let o = 1; function tablica2(){ let tabela2 = '<table>'; for(let i=0;i<n;i++){ tabela2+='<tr>'; for(let j=1;j<=n;j++){ tabela2+='<td>'+(j+i*n)+'</td>'; } } tabela2+='</table>'; document.getElementById("ds").innerHTML='2'+tabela2; } function tablica3(){ let tabela3 = '<table>'; for(let i=0;i<n;i++){ tabela3+='<tr>'; for(let j=1;j<=n;j++){ if(n-(n-l)<=n*n){ if(j%2==1){ tabela3+='<td>'+(n-(n-l))+'</td>'; p=(n-(n-l)); l+=2; }else{ tabela3+='<td>'+(p+2)+'</td>'; l+=2; } }else{ tabela3+='<td>'+(2*(n-(n-o)))+'</td>'; o++; } } } tabela3+='</table>'; document.getElementById("ds1").innerHTML='3'+tabela3; } </script> </body> </html> |