Jqueryで九九表を作る

jquery初心者です。
課題でjqueryで九九表を作っています。
いろいろ参考にしながら以下の形で実装が成功しましたが、疑問点があります。

違う実装の仕方も考えまして、コメントアウトしている、
//$("td").html(i + "" + j +"=" + ij) ;を出し、
代わりに、td.html(i + "" + j +"=" + ij) ;をコメントアウトしたら、数字が全て9*9=81になってしまいます。なぜ、繰り返しが効かないのでしょうか。
また、なぜ、最後の行のみ空欄になってしまうのでしょうか……。

宜しくお願いいたします。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
        /* 課題処理を追加 */
        $(function(){

        for (var j = 1;j <= 9;j++){
         var tr = $("<tr>");
         for (var i = 1;i <= 9;i++){
          var td = $("<td>");
         td.html(i + "*" + j +"=" + i*j) ;
          //$("td").html(i + "*" + j +"=" + i*j) ;
          tr.append(td);
          }
          $("#matrix").append(tr);
        }

        });
    </script>
</head>
<body>
    <table id="matrix" border="1">
        <caption>九九表</caption>
    </table>
</body>
</html>

miyabi_pudding

2020/01/20 15:49

コードは、コードブロックで記載して下さい。 <code>ボタンで出てくる文字列を使えば、コードブロックになります。質問は編集できます。

momokae0416

2020/01/20 15:58

miyabi_takatsuk様ご指摘ありがとうございました！！機能を分かっておりませんで、失礼いたしました…！

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

回答1件

ベストアンサー

var td = $("<td>"); td.html(i + "*" + j +"=" + i*j);と、
$("td").html(i + "*" + j +"=" + i*j);では、文字列を入れる対象がちがうからです。

前者は、新たにtd要素を生成し、その中に文字列を入れるため、意図した結果となりますが、
後者は、HTML内の、td要素の文字列を変更といった動作になります。
HTML内に、td要素は、最初は存在しないため、空のjQueryオブジェクトの中に、文字列が入ってるだけ、となるため、
一発目は、tdが挿入されますが、
二発目以降は、HTML内の全てのtd要素を常に変更するので、for処理の最終結果の9 * 9 = 81に全て置き換わってしまう、というわけです。