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

先日も「jqueryを使わずに、JavaScriptで市松模様の九九の表を作りたい。」というタイトルで質問させていただきましたが、次は少し別の作成法で困っております。
作成したいのは、先日と同じく下記のような表です。

先日は下記の画像のようなコードを、scriptタグ内に書くことで表を作成できましたが、
今回はもう一つ下の画像のように、既にbodyタグ内に記載されたtableのidを使って作成したいと考えています。

どういったコードを書くべきかご教示いただきたく、何卒よろしくお願いいたします。

2025/04/12 05:01

> どういったコードを書くべきか前回の質問に対する utm. さんの回答にあるコードが答えになります。(CSSプロパティ(background color)の変更を for ループの内部に追加します) https://teratail.com/questions/lr2s4i3cpgy9bc#reply-8l551j1dr8hwdx

YuRyo8586

2025/04/12 13:10

ありがとうございます。前回の質問に対する utm. さんの回答にあるコードを元に(head内にscriptを入れたり)コードを書いたのですが…上手く表示されません…。 https://jsfiddle.net/yhb5vo8s/5/ 当方初心者であり、悪い点もよく分かっておらず… ご教示いただけないでしょうか…

utm.

2025/04/12 13:26

JavaScriptが先に実行されてHTMLが後に実行されると、JavaScriptがHTMLを見つけられません。 DOMContentLoadedイベントをリスナーするとか、scriptをHTMLの描画後に実行するために後ろに書くかなどしなければなりません

YuRyo8586

2025/04/12 13:46

ありがとうございます。下記のようにコード書き換えたのですが、使い方合ってますでしょうか？ https://jsfiddle.net/ocjrgp13/

utm.

2025/04/12 13:56

合ってます。ただ、jをインクリメントしていないため無限ループしています。また、なぜ書き換えたのか分かっていませんが、varは非推奨です。

YuRyo8586

2025/04/12 14:03

ありがとうございます。 jのインクリメントを忘れていました。 varを使用しているのは、今教わっているスクールのテキストではvarが出てくるためです。あと、表は問題なく表示できるようになったのですが、何故かセルに色がつかなくなってしまいました。

melian

2025/04/12 14:04

蛇足ながら、以下の記述も考慮するとよいかと思います。 Document: DOMContentLoaded イベント ─ 読み込みが完了しているかどうかのチェック https://developer.mozilla.org/ja/docs/Web/API/Document/DOMContentLoaded_event#%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%81%BF%E3%81%8C%E5%AE%8C%E4%BA%86%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E3%81%8B%E3%81%A9%E3%81%86%E3%81%8B%E3%81%AE%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF > DOMContentLoaded はスクリプト実行の機会がある前に発生することがあるため、リスナーを追加する前にチェックするのが賢明です。

utm.

2025/04/12 15:14

> varを使用しているのは、今教わっているスクールのテキストではvarが出てくるためです。ご回答ありがとうございます。スクールに通っておられるのであれば、そこでご質問されるのが賢明ではないでしょうか。最大限活用しないのはお金の無駄かと思います。また、質問の際にはそういった背景情報を含めることを推奨します。 varやdocument.writeでの記述はjavascriptが発展途上だったころは一般的であったかもしれませんが、1,2年どころではなくとてもとても古い情報です。 jQueryなども含めてネットでも古い情報をもとにコピペして使用するプログラマーもいますが、あらゆる面でよくない方法です。コードの改修に時間を要したり、脆弱性が発生する危険性があります。プログラマーにお金を払っている人がいれば時間がかかるほど、お金を払っている側が損をしてしまいます。スクールや学校でも実際に古い技術を教えることは多々ありますが、自身で技術を身に着けることが最も重要です。当然、初心者であれば様々な情報からどう取捨選択すればよいのかわからないことばかりでしょうが、念頭に置いておいて損はないでしょう。(もし、関心があるのであれば) > 蛇足ながら、以下の記述も考慮するとよいかと思います。理論的に書くことはできますが、意味も分からずフォールバックを書いても意味がありません。 scriptファイルを分けて遅延読み込みする方が役に立ちます。 MDN https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/script#defer または https://qiita.com/phanect/items/82c85ea4b8f9c373d684 > Document: DOMContentLoaded イベント ─ 読み込みが完了しているかどうかのチェックこういうのを(意味も分からず書くのは)悪習慣です。

melian

2025/04/12 15:27

> こういうのを(意味も分からず書くのは)悪習慣です。！なるほど、了解です。

melian

2025/04/12 20:06

> 表は問題なく表示できるようになったのですが、何故かセルに色がつかなくなってしまいました。 > cell.innerHTML=("<td style=background-color:"+bgc+">"+j+"*"+i+"="+(i*j)+"</td>"); td 要素を置き換えるので、cell.innerHTML ではなく cell.outerHTML に当該の HTML 文字列を挿入します。 Element: innerHTML プロパティ - Web API | MDN https://developer.mozilla.org/ja/docs/Web/API/Element/innerHTML > 要素内の DOM ツリーを置き換えるために解釈される HTML または XML を設定します。 Element: outerHTML プロパティ - Web API | MDN https://developer.mozilla.org/ja/docs/Web/API/Element/outerHTML > outerHTML の値を設定すると、その要素とそのすべての子孫を、指定された htmlString を解釈して構築された新しい DOM ツリーで置き換えます。 > 要素が親ノードを持たない場合、その outerHTML プロパティに値を設定してもその要素や子孫は変更されません。 const cell = document.createElement('td'); const bgc = ((i+j)%2===0) ? '#E8E8E8' : '#ffffff'; row.appendChild(cell); // outerHTML を変更する場合は親要素が必要なので、予め tr 要素に追加しておく cell.outerHTML = `<td style="background-color: ${bgc};">${j}*${i}=${i*j}</td>`; ですが、security risk の問題がありますので、td 要素の textContent と style を設定する方がよいかと思います。 const cell = document.createElement('td'); cell.textContent = `${j}*${i}=${i*j}`; cell.style.background = ((i+j)%2===0) ? '#E8E8E8' : '#ffffff'; row.appendChild(cell);

YuRyo8586

2025/04/13 00:17

ご教示くださりありがとうございます。なんとかうまく表示できました。また色々勉強させていただきます。

YuRyo8586

2025/04/13 00:17

コメントありがとうございます。⚪︎⚪︎を試したところ問題が解決しました！ベストアンサーに選びたいので同じ内容を回答欄に投稿いただけますでしょうか？

melian

2025/04/13 05:54

> ⚪︎⚪︎を試したところ問題が解決しました！ > ベストアンサーに選びたいので同じ内容を回答欄に投稿いただけますでしょうか？テンプレート文をそのまま貼り付けた感じですが、utm. さんに前回の質問への回答をこちらに転記してもらって、それをベストアンサーに選ぶとよいかと思います。

YuRyo8586

2025/04/13 07:03

すみません、utm.さんに連絡を取る方法ってありますでしょうか？

utm.

2025/04/13 07:04

ご自身で自己回答し解決済みにしてくださって問題ありません。

YuRyo8586

2025/04/13 07:05

承知しました、色々ご教示くださりありがとうございます。

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

回答2件

自己解決

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery</title> <style> table { border-collapse: collapse; }

td, th {
  border: 1px solid #333;
  padding: 8px;
  text-align: center;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    function kuku(){
        var table=document.getElementById('matrix');
        for(var i=1;i<10;i++){
            var row=document.createElement('tr');
                for(var j=1;j<10;j++){
                    var cell=document.createElement('td');
                    var bgc=((i+j)%2===0)?'#E8E8E8':'#ffffff';
                    row.appendChild(cell);
                    cell.outerHTML=("<td style=background-color:"+bgc+">"+j+"*"+i+"="+(i*j)+"</td>");
                }
                table.appendChild(row);
        }
    }        
    document.addEventListener("DOMContentLoaded", kuku);                      
</script>

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

投稿2025/04/13 07:08

YuRyo8586

総合スコア6

書くコードは先日作成した内容と似たものが良いのですが、

このコードからは大きく変えないと不可能です。

document.writeは、一度出来上がったHTMLに対して使うとHTMLを全消去することになるので、「既存のエレメントに流し込む」用途に使うことはできません。
document.write以外の方法でHTMLを書き換える場合、開きタグと閉じタグのセットでしか処理できないので、「先に<tr>だけ出力する」ようなコードは正しく動きません。

投稿2025/04/12 02:54