jqueryを使わずに、JavaScriptで市松模様の九九の表を作りたい。

下記画像のような市松模様の九九の表を、jqueryを使わずに、JavaScriptで作りたいと思っています。

現在、script部分は以下のようなコードを書いているのですが、表の色が変わるのが、どうしても左上の1*1＝1の部分だけになってしまいます。

どのようにすれば市松模様の表ができるでしょうか？
ご教示いただきたく、何卒よろしくお願いいたします。

utm.

2025/04/10 12:54

まず必要なセルだけを抽出した配列を作って見てください。そういう方法が非効率ながらオススメです。

melian

2025/04/13 05:48 編集

最初のループ処理で background color も指定するとよいかと思います。

maisumakun

2025/04/10 22:26

スタイル設定にJavaScriptを関与させず、CSSだけで片付けることも可能ですが、それではまずいですか？

YuRyo8586

2025/04/10 22:55

皆様ありがとうございます。 melian様にご教示いただいた内容を参考にコードを書き直すと上手く表示できました。ありがとうございます。しかし、 document.write(`<td id='cell' bgcolor=${bgcolor}>${j}*${i}=${i*j}</td>`) の部分の左側のbgcolorをbackground-colorと書き換えると、セルに色がつかなくなったのですが、background-colorと記載するのは良くないのでしょうか？ご教示いただきく、何卒よろしくお願いいたします。

melian

2025/04/10 23:19

> background-colorと記載するのは良くないのでしょうか？ background-color は CSS のプロパティなので、td 要素の属性として指定することができません。 background-color - CSS: カスケーディングスタイルシート | MDN https://developer.mozilla.org/ja/docs/Web/CSS/background-color ところで、先程気が付いたのですが bgcolor 属性は非推奨になっていました。maisumakun さんの言う通り、CSS を利用する形式に書き換えるべきかと思います。 <td>: 表データセル要素 - HTML: ハイパーテキストマークアップ言語 | MDN https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/td > bgcolor 非推奨 > この属性は、列の各セルの背景色を定義します。値は 6 桁の 16 進数による RGB コードで、先頭に '#' が付きます。定義済みの色キーワードの一つを使うこともできます。 > 同様の効果を与えるには、 CSS の background-color プロパティを使用してください。

YuRyo8586

2025/04/10 23:28

ありがとうございます。初歩的なところもわかっていませんでした。一度また詳しく見させていただきます。

melian

2025/04/13 05:49 編集

※ 削除

kei344

2025/04/12 05:43

「ベストアンサーに選ばせていただきました。」とありますが、teratailのシステム的に選択できていないようです。過去の質問についても同じく選択に失敗しているようなので、再度操作をお願いします。

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

回答3件

ベストアンサー

そもそもの話で、作る箇所と色塗る箇所を別々に分けるから
改めてidなんかで引っ掛けて改めてDOMを探索して色塗りという発想になるわけですよ。
最初に表示する時に色付きにしてやればよくね？

javascript
1document.write("<table>");
2for (let i = 1; i < 10; i++) {
3  document.write("<tr>");
4  for (let j = 1; j < 10; j++) {
5    const bgColor = ((i + j) % 2 === 0) ? "#E8E8E8" : "#FFFFFF"; 
6    document.write(`<td style="background-color: ${bgColor}">${i}*${j}=${i*j}</td>`);
7  }
8  document.write("</tr>");
9}
10document.write("</table>");

DOMにCSSのプロパティを書く時は、style属性を使ってみてください。

変数宣言はvarが非推奨。
varで宣言すると意図したスコープのお外まであっちこっち行って制御しにくいので
letとconstを使おうという運動が起こってます。
基本的にconstを使って、 for文等で再代入しまくる箇所は必要最小限letを使うと良いです。

A ? B : Cの書き方を三項演算子と言います。
if文を作るまでもないしょぼい値を返して欲しい所では採用するとスッキリ書ける場合があります。

バッククォートで文字を括る構文をテンプレートリテラルと呼びます。
文字列の途中に変数や式をねじ込む場合はめっちゃ使いやすくて便利！

投稿2025/04/11 06:42

編集2025/04/11 08:03

miyabi-sun

総合スコア21380

melian

2025/04/11 06:51

> 参考演算子おそらく三項演算子でしょう。

miyabi-sun

2025/04/11 08:02

しまった！！

YuRyo8586

2025/04/12 01:48

回答ありがとうございます。試したところ問題が解決しました！ベストアンサーに選ばせていただきました。

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

すみません。コーディングについての質問かと思いましたが、これはアルゴリズムの問題でした。
つまりx,yの二次元空間だと捉え、市松模様はアルゴリズムによってどう表現できるかという課題ですね。

画像のコードはiやjが切り替わりますが、対象の変数が書き換わらないので常に同じ変数を参照し、同じ部分を書き換えてしまっています。

この問題はDOMの表現の理解が必要であるため、アルゴリズムの問題としては無駄なことを考えねばならず難易度が高い気がします。

このぐらいのテンプレートはあっていい気がします。

js
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Document</title>
7
8  <style>
9    table {
10      border-collapse: collapse; /* 罫線が重ならないように */
11    }
12
13    td, th {
14      border: 1px solid #333;    /* セルに1pxの線を表示 */
15      padding: 8px;              /* 中の文字に余白 */
16      text-align: center;        /* 中央寄せ */
17    }
18
19    .bg-gray {
20      background-color: gray;
21    }
22  </style>
23</head>
24<body>
25  
26  <h1>九九テーブル</h1>
27  <table id="multiplicationTable" ></table>
28
29  <script>
30    const table = document.getElementById("multiplicationTable");
31
32    for (let i = 1; i <= 9; i++) {
33      const row = document.createElement("tr");
34      for (let j = 1; j <= 9; j++) {
35        const cell = document.createElement("td");
36        cell.textContent = `${i} × ${j} = ${i * j}`;
37        row.appendChild(cell);
38      }
39      table.appendChild(row);
40    }
41
42    const rows = [...document.querySelectorAll('tr')]
43    // console.log(rows);
44
45    const cells = rows.map((value) => [...value.querySelectorAll('td')])
46    // console.log(cells);
47    
48    console.table(cells)
49    
50
51  </script>
52</body>
53</html>

学習用ならいいですが、document.writeも非推奨です。

また、学習用ならconfirmで行列の座標を受け取ってそこに色を付けるくらいの難易度からのほうがマシにも思えます。

で、forとかwhileとか、学習とか完全に無視した回答例はこちらです。

js
1const target = cells.map((row, rowIndex) => {
2  return row.filter((cell, cellIndex) => {
3    return ( ((rowIndex+cellIndex) % 2) == 0)
4  })
5})
6
7// console.log(target);
8    
9target.flat().forEach(cell => {
10    cell.classList.add("bg-gray");
11})

課題だと思いますが、あえて市松模様だとか九九の表だとか表現しているのはAIを使用したコーディングでAIに適切に指示を与えられるのかを育んでいるのでしょうか。それとも具体的な言葉を用いることで、なじみやすくしているのでしょうか。
今、AIに聞いてみましたがちゃんと伝わるみたいですね。
よくある定番の課題内容なんでしょうかね。

投稿2025/04/11 02:55

編集2025/04/11 03:04

utm.

総合スコア752

おなじidを復数設定しているからでしょうね。
backgroundColorは本来スタイルシートで提案すべきですが練習ということでtdに直接埋め込みたいならこんな感じで

html
1<script>
2window.addEventListener('DOMContentLoaded', async ()=>{
3  const table=Object.assign(document.createElement('table'),{border:1});
4  Array(9).fill(null).map((_,y)=>{
5    const tr=document.createElement('tr');
6    Array(9).fill(null).map((_,x)=>{
7      const td=Object.assign(document.createElement('td'),{textContent:`${x+1}*${y+1}=${(x+1)*(y+1)}`,style:`background-Color:${(x+y)%2?'#E8E8E8':'#FFFFFF'}`});
8      tr.appendChild(td);
9    });
10    table.appendChild(tr);
11  });
12  document.body.appendChild(table);
13  
14});
15</script>