まずは基本のfor文を使った九九の作り方（javascriptのみ使用バージョン）。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>loop課題九九</title>
</head>
<body>
<script>
document.write("<table>");
for (var i = 1; i <= 9; i++){
document.write("<tr>");
for (var j = 1; j <= 9; j++){
document.write("<td>"+i+"×"+j+"="+(i*j)+"</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
</body>
</html>
for文を上から見ていくと、まずi=1で初期化される。
続いてi<=9の条件を満たしているか評価し、for１つ分の時と同じく順番通りに
本来出力される下にいく。(初めて取り掛かったときはi++まで行ってから下の処理に進むと勘違いしていた)
今回はそこでまずtrが作成される。そしてさらに下にまだ処理していない第二のforがある為、こちらの処理を行う。
同じようにj=1で初期化しj<=9の判定を行い、順番通り下の処理へ。この時td/tdを含んだ九九の式を出力。(i=1,j=1)
続いてjの値が2になり、j<=9の判定を行い再び順番通り出力へ。
この時i=1,j=2。これを第二のforがfalseになるまで続ける。
falseになった後（ｊ＝９）、ようやく第一のfor文の加減式にもどり、i=2になる。
i=2をi<=9に当て嵌め、trueのため本来出力される下へ行く。
また第二のforがある為、再びそのforがfalseになるまで加減はされない。
といった流れ。
続いてjQueryを用い、隣り合うセルの色が異なる九九表を作成する。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery九九表</title>
<!--<link rel="stylesheet" href="plactice_jquery.css">-->
<style>
.gray{
background-color :gray;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
/* 課題処理を追加 */
$(function() {
for(var j=1; j<=9; j++){
$('#matrix').append('<tr></tr>');
for(var i=1; i<=9; i++){
$('tr:last-child').append('<td>' + i + '*' + j + '=' + i*j + '</td>');
}
}
$('td:even').addClass('gray');
});
</script>
</head>
<body>
<table id="matrix" border="1">
<caption>九九表</caption>
</table>
</body>
</html>
jqueryはcssのように使うことができる。このなかではlastchildが肝。
そして当然ながらtd:evenのところをtd:oddにすれば色が変わるところを変えることができる。