javascriptで数字表の三の倍数の数字をifを使い色を変えたいです。

前提・実現したいこと

Javascriptで０から９９までの文字が並んだ表をつくり、三の倍数と三のつく数字の色を変えて表示させたいのですが、表が完成したところで色を変える方法がわかりません。
ifを使い数字を３で割り余りが〇の数字を対象に色を変えるという理屈まではわかっています。

該当のソースコード

<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>数字表</title> <link rel="stylesheet" href="javascript.css"> </head> <body> <div class="container"> <table class="border" border="1"> <script> document.write('<tr>'); for (var i = 0; i <= 9; i++) { document.write('<td>' + i + '</td>'); } document.write('</tr>'); for (var j = 1; j <= 9; j++) { document.write('<tr>'); for (var k = 0; k <= 9; k++) { document.write('<td>' + j + k + '</td>'); } document.write('</tr>'); } </script> </div> </body> </html>

ソースコード
```Javascript

### 試したこと

ifを使い、色を変えることを何回か試しましたが、三の倍数と三の付く数字の対象の取り方と色の変え方がわかりません。
ここに問題に対して試したことを記載してください。

行動規範の内容に同意します

回答2件

ベストアンサー

先頭行だけ別ループになっていたのは合わせました。

javascript
1<script>
2    for (var j = 0; j <= 9; j++) {
3        document.write('<tr>');
4        for (var k = 0; k <= 9; k++) {
5            var num = j * 10 + k;
6            if ((num % 3 === 0)) {
7                document.write('<td style="color: red;">' + num + '</td>');
8            } else {
9                document.write('<td>' + num + '</td>');
10            }
11        }
12        document.write('</tr>');
13    }
14</script>

投稿2021/12/29 08:43

umau

総合スコア805

html
1<!doctype html>
2<html lang="ja">
3
4<head>
5<meta charset="UTF-8">
6<title>数字表</title>
7<link rel="stylesheet" href="javascript.css">
8</head>
9
10<body>
11<div class="container">
12<table class="border" border="1">
13<script>
14    var col = ["#ee0000","#00ee00"];
15document.write('<tr>');
16for (var i = 0; i <= 9; i++) {
17document.write('<td bgcolor='+((i%3===0 || i.toString().indexOf('3') !== -1)?col[0]:col[1])+'>' + i + '</td>');
18}
19document.write('</tr>');
20for (var j = 1; j <= 9; j++) {
21document.write('<tr>');
22for (var k = 0; k <= 9; k++) {
23    var val = j*10+k;
24document.write('<td bgcolor=' + ((val % 3 === 0 || val.toString().indexOf('3') !== -1) ? col[0] : col[1]) + '>' + j + k + '</td>');
25}
26document.write('</tr>');
27}
28</script>
29</div>
30</body>
31
32</html>