JQUERYテーブル appendで行追加すると2行縦表示したいが横並びになる

Question

前提・実現したいこと

こんにちは。
javascriptでJQUERYのテーブルを実装しました。テーブル自体は出来ましたが、cloneした行をappendすると、1行目と2行目を縦並びすることを期待しましたが、1行目に横並びで表示しました。

JQUERYは初めて使用しましたが、不明点が多いです。解決策がありましたら教えて下さい。

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

下記データを1行で表示している事が問題です。
1行目のデータは100 01～02 300
2行目のデータは200 03～04 400

状況の追記4

JSはanimalArea.js、jquery-3.6.0.min.js
JSフォルダと同じ階層に、main.html
※htmlは削除しました。
ブラウザはchromeまたはedgeです。
【手順】
htmlをダブルクリックして起動しますと、5行表示を再現します。
main.html
animalArea.js
※isは該当コード行のみに修正します。
本jsに5行表示するコードがあります。addEventListenerをコメントアウトすると、readyメソッドで初期表示の2行表示します。

$(document).ready(function() {
	$('#animalCntrlArea-tbody>tr')
		.clone(true)
    	.insertAfter($('#animalCntrlArea-tbody>tr'));

	$(document).on('change', '.changeList', function() {
	$(this)
  		.parent()
  		.next()
  		.html($(this).val());
	});
});

window.addEventListener('DOMContentLoaded', function() {

    // 問題のコードです
	let t=$('#animalCntrlArea-tbody>tr');
	let tr0=t.eq(0).clone(true);
	t.parent().append(tr0);
	
}, false);

Answer 1

F12 で 生成された構造を確認してください。
<tr/> に <tr/> を追加していませんか？
追加するならその親の <tbody/> に追加してください。

<tr/> の あとに <tr/> を追加したいのであれば .append() ではなく、 .after() を使用してください。

Comments

[garou]

juner様
ご回答ありがとうございました。
コードを修正して実行しますと、2行表示しましたが、2行目はtable配下にtrを追加しました。
原因は分かりませんが、2番目の子の行はtable配下に追加していました。
出来ればtbody配下にtr(2番目の子の行)に追加したいのですが、どのように修正するべきかご教示頂きたいです。

[juner]

`t.eq(0).after(t.eq(0).clone(true))` みたいな感じに `clone()`元の後に追加ではだめだったのですか？

[garou]

juner様
ご回答ありがとうございました。
ご教示頂いた内容を元に、コードを変えて試してみました。
[結果]
ダメでした。修正方方法に問題があるような気がします。
全てtbody配下にtrを5行追加しました。

「状況の追記2」に試したコードを記載しました。
juner様がイメージしたコードとなっているかをご確認いただきたいです。
なぜ、子要素trタグを5行追加するのかが分かりません。
デバッグ画面を見ますと、tbody配下は<tr></tr>が6個あります。

[garou]

juner様
問題は解決しました。
最初から問題コード(html、js)を再現できる形で投稿するべきでした。
お手間をお掛けして申し訳ございません。
この度は本当にありがとうございました。

Answer 2

trではなくtable（tbody）に追加する必要があるのでは。

t.parent().append(tr0);

【.parent() | jQuery API Documentation】
https://api.jquery.com/category/ajax/

Comments

[garou]

kei344様
ご回答ありがとうございました。
コードを修正して実行しますと、tbody配下にtrを5行表示していました。
「状況の追記」に画面表示のイメージファイルを張り付けました。
原因は分かりませんが、tbody配下にtrを5行追加しています。親の行以外で子の行を5行追加です。出来れば子の行を2行にしたいのですが、どのように修正するべきかご教示頂きたいです。

[kei344]

状況がわからないので、#animal_room-tbodyを含むテーブルのHTMLを質問文に追記してみてください。

[garou]

kei344様
ご回答ありがとうございました。
状況の追記3にてhtmlを追加しました。
お手数おかけしますが、ご確認よろしくお願い致します。
まだ、5行表示の問題が再現致します。

[kei344]

https://jsfiddle.net/p8v2ejny/

> 5行表示の問題
こちらの提示した回答で再現しませんでした。
同じスクリプトを複数読み込んでいたりしませんか？（ループの中など）

[garou]

kei344様
ご回答ありがとうございました。
状況の追記4に再現するコードを記載しました。
質問欄で文字数制限にかかりましたので、コードを削除して記載しました。
テーブルは2つありますが、同じ仕組み(jquery)で動かす予定です。
問題のテーブルはanimalCntrlArea-tableです。
記載したコードで動作確認した結果、再現しました。
申し訳ございませんが、今一度、動作をご確認願います。
同じスクリプトを複数読込む処理はございません。

[kei344]

$('#animalCntrlArea-tbody>tr')
.clone(true)
.insertAfter($('#animalCntrlArea-tbody>tr'));
（中略）
let t=$('#animalCntrlArea-tbody>tr');
let tr0=t.eq(0).clone(true);
t.parent().append(tr0);

2回処理していますが･･･。

[garou]

kei344様
ご回答ありがとうございました。

＞2回処理していますが･･･。
知識不足で申し訳ございません。
readyメソッドの下記をコメントアウトしました。
$('#animalCntrlArea-tbody>tr')
.clone(true)
.insertAfter($('#animalCntrlArea-tbody>tr'));
また、CSSで親と子の行を表示して2行表示することを確認しました。
意図したデータで表示しました。
本当にありがとうございました。