jQueryを用い、隣り合うセルの色が異なる九九表を作成方法について

前提・実現したいこと

jQueryを用い、隣り合うセルの色が異なる九九表を作成してください。

JavaScript初心者です。
Jqueryを使って九九表と隣り合う色の変え方がわかりません。
ネットで検索して見たのですが、
どのように構成されているのかわからなかったため、質問させていただきます。
宜しくお願いします。

発生している問題・エラーメッセージ

どのようなイメージで作成して行けばいいかわかりません。

作成イメージ
iとjをそれぞれ取得して表示させる。かけ算をする。

どうしたらこのように表示されて、これをしなくては行けないからこのように表示したなど、
具体的にご教示いただけますと幸いです。

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>jQuery</title>
</head>
<body>
	<div class="containter">
		<table id="table1"></table>
	</div>
	<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
	<script>
		var table = $('#table1');
		for (var i = 1; i<10; i++);
			table.append('i');
		for (var j = 1; j<10; i++);
			table.append('j');
	</script>
</body>
</html>

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

sublimetext

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

回答3件

表組みの中身はともかく、市松模様についてはCSSだけでも表現可能です。

:nth-child(even)や:nth-child(odd)のようなセレクタがあって、偶数番目、奇数番目だけのスタイルを適用できます。

投稿2020/03/15 02:16

maisumakun

総合スコア146018

mootoshi

2020/03/21 03:49

教えていただきありがとうございます。

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

HTMLは修正なしでJSだけ以下のように修正

jQuery
1
2var table = $('#table1');
3for (var i = 1; i<10; i++){
4  table.append('<tr>');
5  for(var j = 1; j<10; j++) {
6    if((i%2===0&&j%2===1)||(i%2===1&&j%2===0)){
7      table.append('<td style=background:#555;color:#FFF>'+i+'*'+j+'</td>');
8    }else{
9      table.append('<td>'+i+'*'+j+'</td>');
10    }
11  }
12  table.append('</tr>')
13}
14

サンプル

投稿2020/03/15 04:07

kyoya0819

総合スコア10429

mootoshi

2020/03/15 13:10

ご回答ありがとうございます。一点初歩的な質問で恐縮ですがご質問です。 5行目のこちらの意味がわかりません、、、 if((i%2===0&&j%2===1)||(i%2===1&&j%2===0)) ご教示お願いします。

kyoya0819

2020/03/15 14:07

・iを2で割った余りが0である。かつ、jを2で割った余りが1である。・iを2で割った余りが1である。かつ、jを2で割った余りが0である。上の２つのいずれかの時。という意味です。言い換えると、・偶数列の奇数個め・奇数列の偶数個めのいずれかの時。という意味です。

mootoshi

2020/03/21 03:47

大変助かりました。ありがとうございます。

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

ベストアンサー

ほぼ同内容の質問が過去ログにあります。

JavaScript - jQueryを用い、隣り合うセルの色が異なる九九表を作成｜teratail

jQuery で市松模様のCSSを設定するコード例

js
1$(function () {
2  let table = $("#table1");
3  table.append($('<caption>').text('九九表')); 
4  for(i=1; i <= 9; i++){
5    let tr = $('<tr>');
6    for(j=1; j <=9; j++){
7      tr.append($('<td>').text(i+'×'+j+'='+i*j)
8           .css({"background-color": (i * 9 + j) % 2 ? "#fff" : "#ccc"}));
9    }
10    table.append(tr);
11  }
12});

Codepenサンプル

CSSで市松模様を設定する場合のコード例

css
1#table1 tr:nth-child(2n) td:nth-child(2n),
2#table1 tr:nth-child(2n+1) td:nth-child(2n+1){
3  background-Color: #ccc;
4}

js
1$(function () {
2  let table = $("#table1");
3  table.append($('<caption>').text('九九表')); 
4  for(i=1; i <= 9; i++){
5    let tr = $('<tr>');
6    for(j=1; j <=9; j++){
7      tr.append($('<td>').text(i+'×'+j+'='+i*j));
8    }
9    table.append(tr);
10  }
11});