質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.53%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

1231閲覧

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

musashidayo

総合スコア53

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2023/03/30 03:10

実現したいこと

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

前提

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

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

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

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

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

[object HTMLCollection]

該当のソースコード

html

1<table id="table__sort__wide" class="table__sort sort-table"> 2<thead> 3<tr> 4<th data-sorter="false">見出しA</th> 5<th data-sorter="false">見出しB</th> 6</tr> 7</thead> 8<tbody> 9<tr> 10<td>項目A-1</td> 11<td>項目B-1</td> 12</tr> 13<tr> 14<td>項目A-2</td> 15<td>項目B-2</td> 16</tr> 17<tr> 18<td>項目A-3</td> 19<td>項目B-3</td> 20</tr> 21</tbody> 22</table> 23 <script type="text/javascript"> 24 $(function() { 25 //検索ワードを指定 26 const search = "項目A-3"; 27 let sort_table_wide = document.getElementById("table__sort__wide"); 28 var rows = $("#table__sort__wide tbody").children(); 29 //行数 30 var rowsNum = rows.length; 31 //現在の行数 32 var nowsNum = 0; 33 34 for (let row of sort_table_wide.rows) { 35 console.log(nowsNum); 36 for(let cell of row.cells){ 37 console.log(cell.innerText); 38 const result = cell.innerText.includes(search); 39 console.log(result); 40 if(result == true){ 41 var changeNum = nowsNum; 42 } 43 } 44 nowsNum++; 45 } 46 var changeRow = rows[changeNum - 1] 47 sort_table_wide.tBodies[0].deleteRow(changeNum - 1); 48 sort_table_wide.tBodies[0].insertRow(0); 49 sort_table_wide.rows[1].outerHTML = changeRow"; 50 }); 51 </script>

試したこと

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

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2023/03/30 03:14

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

2023/03/30 03:21

早速のご指摘ありがとうございます。 const search = "項目A-3"; 上記で指定したtextがtd内に含まれていた場合、trの中身丸々をtbodyの中の一番上に持ってきたいという意図でございます。 当該のソースコードですと3番目のtr内に"項目A-3"が含まれているのでそれを <tr> <td>項目A-1</td> <td>項目B-1</td> </tr> の上に持ってこれるようにするということでした
guest

回答1

0

ベストアンサー

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

javascript

1<script> 2window.addEventListener('DOMContentLoaded', ()=>{ 3 btn.addEventListener('click',()=>{ 4 const tds=[...table__sort__wide.querySelectorAll('td')].filter(x=>x.textContent==keyword.value); 5 tds.forEach(x=>x.closest('tbody').querySelector(':first-child').before(x.closest('tr'))); 6 }); 7}); 8</script> 9<input name="keyword" id="keyword" value="項目A-3"> 10<input type="button" value="btn" id="btn"> 11<table id="table__sort__wide" class="table__sort sort-table"> 12<thead> 13<tr> 14<th data-sorter="false">見出しA</th> 15<th data-sorter="false">見出しB</th> 16</tr> 17</thead> 18<tbody> 19<tr> 20<td>項目A-1</td> 21<td>項目B-1</td> 22</tr> 23<tr> 24<td>項目A-2</td> 25<td>項目B-2</td> 26</tr> 27<tr> 28<td>項目A-3</td> 29<td>項目B-3</td> 30</tr> 31</tbody> 32</table>

投稿2023/03/30 03:26

yambejp

総合スコア114339

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

musashidayo

2023/03/30 03:41

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

2023/03/30 04:54 編集

そのままコピペして動くはずですが念のためcodepenに貼っておきます https://codepen.io/yambejp/pen/bGxybRg 上記で動作しないようなら、ご利用のOSやブラウザの種類やバージョンを提示ください
musashidayo

2023/03/30 05:22

codepenまで作成いただきありがとうございます。 もしかすると当方の環境の別の記述が影響しているのかもしれないので一旦まっさらなところで実行してみます。 一点質問なのですが、 const tds = [...table__sort__wide.querySelectorAll("td")].filter( 上記の...の部分が何をやっている処理なのかがつかめないのですが、どういったものなのでしょうか??
yambejp

2023/03/30 05:54

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

2023/03/31 06:39

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.53%

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

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

質問する

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。