javascriptでテーブルの中身(特定のtr要素)を特定の場所に移動したい

Question

実現したいこと

ここに実現したいことを箇条書きで書いてください。

前提

table要素のtdの中身のテキストで、こちらで指定したものが含まれていた場合、親要素のtrごと見出しの下部に表示箇所を移動したい。

一発で移動する方法がわからなかったため、当該trの中身を変数に一旦保存してから保存したtrをdeleteRow()で削除後にinsertRow()でtr要素のみを指定箇所に挿入<-ここまでは思った通りの動作でした

その後にinsertRow()で作成したtrをouterHTMLで保存してあったtrの中身に変更しようとしたところ下記の[object HTMLCollection]が表示されてしまった。

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

当該trタグの中身が以下となり、思ったような挙動にならない。

[object HTMLCollection]

該当のソースコード

<table id="table__sort__wide" class="table__sort sort-table">
<thead>
<tr>
<th data-sorter="false">見出しA</th>
<th data-sorter="false">見出しB</th>
</tr>
</thead>
<tbody>
<tr>
<td>項目A-1</td>
<td>項目B-1</td>
</tr>
<tr>
<td>項目A-2</td>
<td>項目B-2</td>
</tr>
<tr>
<td>項目A-3</td>
<td>項目B-3</td>
</tr>
</tbody>
</table>
				<script type="text/javascript">
					$(function() {
                                               //検索ワードを指定
						const search = "項目A-3";
						let sort_table_wide = document.getElementById("table__sort__wide");
						var rows = $("#table__sort__wide tbody").children();
						//行数
						var rowsNum = rows.length;
						//現在の行数
						var nowsNum = 0;

						for (let row of sort_table_wide.rows) {
							console.log(nowsNum);
							for(let cell of row.cells){
								console.log(cell.innerText);
								const result = cell.innerText.includes(search);
								console.log(result);
								if(result == true){
									var changeNum = nowsNum;
								}
							}
							nowsNum++;
						}
						var changeRow = rows[changeNum - 1]
						sort_table_wide.tBodies[0].deleteRow(changeNum - 1);
						sort_table_wide.tBodies[0].insertRow(0);
						sort_table_wide.rows[1].outerHTML = changeRow";
					});
				</script>

試したこと

objectをstring変換するものをいくつか試したもののそちらも動作せずJSON.stringify()/String()等

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[yambejp]

仕様がわからないですが項目A-3を含むtrを一番下にもってくるのですか？
すでに一番したにありませんか？

[musashidayo]

早速のご指摘ありがとうございます。
const search = "項目A-3";
上記で指定したtextがtd内に含まれていた場合、trの中身丸々をtbodyの中の一番上に持ってきたいという意図でございます。

当該のソースコードですと３番目のtr内に"項目A-3"が含まれているのでそれを
<tr>
<td>項目A-1</td>
<td>項目B-1</td>
</tr>
の上に持ってこれるようにするということでした

Answer 1

キーワードを含むものが先頭になればいいならこんな感じで

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  btn.addEventListener('click',()=>{
    const tds=[...table__sort__wide.querySelectorAll('td')].filter(x=>x.textContent==keyword.value);
    tds.forEach(x=>x.closest('tbody').querySelector(':first-child').before(x.closest('tr')));
  });
});
</script>
<input name="keyword" id="keyword" value="項目A-3">
<input type="button" value="btn" id="btn">
<table id="table__sort__wide" class="table__sort sort-table">
<thead>
<tr>
<th data-sorter="false">見出しA</th>
<th data-sorter="false">見出しB</th>
</tr>
</thead>
<tbody>
<tr>
<td>項目A-1</td>
<td>項目B-1</td>
</tr>
<tr>
<td>項目A-2</td>
<td>項目B-2</td>
</tr>
<tr>
<td>項目A-3</td>
<td>項目B-3</td>
</tr>
</tbody>
</table>

Comments

[musashidayo]

早速のご回答ありがとうございます
こちらご教授いただいたソースコードのまま当方の環境で確認してみたところ、動かなかったのですがどこか変更する必要があったのでしょうか？？

[yambejp]

そのままコピペして動くはずですが念のためcodepenに貼っておきます

https://codepen.io/yambejp/pen/bGxybRg

上記で動作しないようなら、ご利用のOSやブラウザの種類やバージョンを提示ください

[musashidayo]

codepenまで作成いただきありがとうございます。
もしかすると当方の環境の別の記述が影響しているのかもしれないので一旦まっさらなところで実行してみます。

一点質問なのですが、
const tds = [...table__sort__wide.querySelectorAll("td")].filter(
上記の...の部分が何をやっている処理なのかがつかめないのですが、どういったものなのでしょうか？？

[yambejp]

(1)id=table__sort__wide要素から
(2)全てのtdを抜き出し
(3)NodeListを配列に置き換えて
(4)フィルタ=textContentがkeywordの値と合致するものを抽出

[...○○○]は(3)の処理です

[musashidayo]

他の記述とバッティングしておりそちらを変更し無事にcodepenと同じ表示がされました。
お早いご返信ありがとうございます。