JQueryで表を９行９列にしたい

JQueryを学習中です。
教科書にあった掛け算を表形式で表示させたいです。
９行の９列にしたいのですが、思うようにいきません。
どこが間違いなのか、ご教示お願いします。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>九九表</title>
        <style>
        #front{
            border:1px solid #cccccc;
        }
        #front td{
            border:1px solid #cccccc;            
        }
        caption{
            font-weight:bold;
        }
        
    </style>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
    
        var i = 1;
        var J = 1;
        var goukei =  0;
        
        $(function(){      
        for(i=1; i <= 9; i++){
            for(j=1; j <=9; j++){
                goukei = i*j;
                if(i === 1){
                $("<td>").before("<tr>");
                }
                if(i === 9){
                $("</td>").after("</tr>");
                }
                $('#front').append("<td>"+i+"×"+j+"="+goukei+"</td>");
            }
         }
        })
    </script>

</head>
<body>
    <table id="front">
        <caption>九九表</caption>
    </table>
</body>
</html>

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

回答3件

table内にtrタグがないようです。
trがなければ、tdが次の行に移ってくれない結果となるでしょう。

html
1<!-- 現状 -->
2<table>
3  <td>1×1=1</td><td>...</td> 以降延々とtdが続く...
4<table>
5
6<!-- 目標 -->
7<table>
8  <tr><td>1×1=1</td><td>...</td> ... <td>...</td></tr>
9  <tr><td>2×1=2</td><td>...</td> ... <td>...</td></tr>
10   ...
11  <tr><td>9×9=81</td><td>...</td> ... <td>...</td></tr>
12<table>

trがあれば、trで囲まれたtdは1行のまとまりになって表示されます。

trがない原因についてですが、jqueryのセレクタの書き方としては、$("<td>")ではなく$('td')になりますので、全体的に見直す必要があるかもしれません。（jqueryでは、閉じタグを取得することはできない）

投稿2019/09/23 09:23

編集2019/09/23 09:32

siruku6

総合スコア1382

midori_saki

2019/09/23 10:45

間違いをご指摘いただき、ありがとうございます！

siruku6

2019/09/23 12:44

考えてもらおうかと思って具体的なやり方は書きませんでした、、、 trタグの中にtdタグを追加していくようなアルゴリズムを組むことを目指せば、より勉強になるとは思います。

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

解決済みですが、jQuery勉強中なので、チャレンジしてみました。

html
1<div id="tbl99"></div>

js
1$(function () {
2  let tableTag = $('<table>'); //table タグ作成
3  tableTag.append($('<caption>').text('九九表')); 
4  for(i=1; i <= 9; i++){
5      let trTag = $("<tr>");  //tr タグ作成
6      for(j=1; j <=9; j++){
7        trTag.append($('<td>').text(i+'×'+j+'＝'+i*j));   
8      }
9      tableTag.append(trTag);
10  }
11
12  $('#tbl99').append(tableTag);
13});

CodePenの動作サンプル
jQueryで九九表作成

jQueryは、$('<table>')で閉じタグも自動生成してくれるようです。

投稿2019/09/23 13:39

hatena19

総合スコア34073

siruku6

2019/09/23 15:20

要素を取得するときは<>なしで、要素を生成するときは<>付きで記載するんですね。私も勉強になりました。

midori_saki

2019/09/23 21:47

hatena19さん、いつもありがとうございます。書いていただいたコードなんですが、ほかのエディタでは表示がされず、CodePenではなぜ表示できるんだろう....と別の疑問が出てきました。また教えてください。

hatena19

2019/09/23 22:48

jQueryを読み込んでますか？ https://jsfiddle.net/psgh59Lx/ でも表示できましたし、HTMLにして確認もしましたが、表示できました。

midori_saki

2019/09/24 02:04

あ、すいません！読み込んでませんでした！表示されました！

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

ベストアンサー

jQuery使ったコト無い人の回答
<tr></tr>がどこの<td></td>に引っ付けばいいのかが質問内容の記述ではわからないのでは無いでしょうか
質問者さんの意図する表示にはなりませんでしたがこんな感じかと…

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>九九表</title>
6        <style>
7        #front{
8            border:1px solid #cccccc;
9        }
10        #front td{
11            border:1px solid #cccccc;
12        }
13        caption{
14            font-weight:bold;
15        }
16
17    </style>
18    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
19    <script>
20
21        var kuku_array = [];
22
23        $(function(){
24            for(var i=1; i <= 9; i++){
25                for(var j=1; j <=9; j++){
26                    goukei = i*j;
27                    if(j === 1){
28                        kuku_array.push("<tr><td>"+i+"×"+j+"="+goukei+"</td>");
29                    }
30                    if(j === 9){
31                        kuku_array.push("<td>"+i+"×"+j+"="+goukei+"</td></tr>");
32                    }
33                    if(j != 1 && j != 9){
34                        kuku_array.push("<td>"+i+"×"+j+"="+goukei+"</td>");
35                    }
36                }
37            }
38        $('#front').append(kuku_array.join(''))
39        })
40    </script>
41
42</head>
43<body>
44    <table id="front">
45        <caption>九九表</caption>
46    </table>
47</body>
48</html>

投稿2019/09/23 09:38

編集2019/09/23 09:40

mushroominger

総合スコア133

midori_saki

2019/09/23 10:43

ありがとうございます！イメージしていたものと同じように表示されました????

mushroominger

2019/09/23 10:46

は…はい！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

JQueryで表を９行９列にしたい

関連した質問