【JavaScript】【jQuery】table要素を使った表の作り方

前提・実現したいこと

JavaScript及びjQuery初心者です。
table要素を使い、4マス×4マスで１〜１６までの数字の表を作りたいです。

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

以下のコードだと全ての数字が１６で表示されてしまいます。
初歩的なところで申し訳ないのですが、間違えている部分と解決策を教えていただきたいです。
タイトルを入力してくださいclose

該当のソースコード

m.ts10806

2021/09/04 11:09

コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564

m.ts10806

2021/09/04 11:09

デバッグして変数の値を追ってみればわかるのでは？

758bat951418

2021/09/05 04:15

code機能知りませんでした。以後使用します、ありがとうございます。

m.ts10806

2021/09/09 04:47

質問は編集できます。「以後」は「今」も含みますしいつ来るかわからない次回にまわすと忘れます。

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

回答2件

javascript
1<script>
2$(function(){
3  for(var i=1;i<=16;i++){
4    if(i%4==1){
5      var tr=$('<tr>').appendTo('table');
6    }
7    tr.append($('<td>').text(i));
8    
9  }
10});
11</script>
12<table></table>

投稿2021/09/06 08:04

yambejp

総合スコア116724

758bat951418

2021/09/09 04:33

ありがとうございます、納得いたしました！

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

ベストアンサー

変数tdがforの外で定義されているので同じ変数に対して値を更新し続けていることになります。(すべてが16になる理由)
実はfor (var k = 1; k <= 16; k++) {は意味がないループになっています。
本来なら1行4*16列の表が出来上がるはずです。（試しにvar td = $('<td>');を内側に入れてみてください）

求めているのが下記なら、中の16周させているforは不要で、
iとjを使うか、カウンタ用に別の変数を使えば良いです。

列1	列2	列3	列4
1	2	3	4
5	6	7	8
9	10	11	12
13	14	15	16

js
1	let count = 1;
2	for (var i = 1; i <= 4; i++) {
3		var tr = $('<tr>');
4		for (var j = 1; j <= 4; j++) {
5			var td = $('<td>');
6			td.html(count);
7			tr.append(td);
8			count++;
9		}
10		$('table').append(tr);
11	}