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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

Q&A

解決済

4回答

6816閲覧

【HTML】<tr></tr>ごとに改行して出力させたい【JavaScript】

MaShiRo_H

総合スコア328

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

0グッド

1クリップ

投稿2016/06/03 05:37

はじめまして。
いつもお世話になっていますm(_ _)m

とても初歩的な質問かもしれませんが、どなたかお力添えいただけますと幸いです。

<table></table>の中のテキストを取得し、 別の要素(例えば<div></div>)の中に再出力する、ということをしたいのですが、 テキストは取得できているものの、<tr></tr>ごとに改行して出力することができず カンマ区切りでズラリと横並びに表示されてしまいます。

テーブル内は動的に変化するので、for文等で処理できると助かります。
イベントハンドラ等は無視していただいて問題ありません。

JavaScript

1 2var data = []; 3var tr = $("table tr"); 4 for( var i=0,l=tr.length;i<l;i++ ){ 5 var cells = tr.eq(i).children(); 6 for( var j=0,m=cells.length;j<m;j++ ){ 7 if(typeof data[i]=="undefined") 8 data[i] = []; 9 data[i][j] = cells.eq(j).text(); 10 } 11 } 12 $(".here").text(data);

HTML

1<!-- 取得するテーブル --> 2<table> 3 <tbody> 4 <tr> 5 <td>A</td> 6 <td>B</td> 7 <td>C</td> 8 </tr> 9 <tr> 10 <td>1</td> 11 <td>2</td> 12 <td>3</td> 13 </tr> 14 </tbody> 15</table> 16<!-- 出力先 --> 17<div class="here"> 18</div>

表示させたい内容
A,B,C
1,2,3

現在
A,B,C,1,2,3

すっかり頭が凝り固まってしまっているので、
アドバイスでもかまいません、皆様のご回答お待ちしております。

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

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

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

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

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

guest

回答4

0

javascript

1document.querySelector('.here').innerHTML = 2Array.prototype.map.call(document.querySelectorAll('tr'), function(row){ 3 return Array.prototype.map.call(row.querySelectorAll('td'), function(cell){ 4 return cell.textContent; 5 }) ; 6}).join('<br>');

https://jsfiddle.net/20qvq8fn/

投稿2016/06/03 05:58

編集2016/06/03 05:59
Lhankor_Mhy

総合スコア35869

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

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

MaShiRo_H

2016/06/03 06:19

わ、短い! なるほど、こうやって書けるのですね。。 一つずつ解読してマスターしていきたいと思います! ありがとうございます!
guest

0

こんにちは

いろんな方法があるんですねー

javascript

1 var tr = $("table tr"); 2 for( var i = 0 ; i < tr.length ; i++ ){ 3 var data = []; 4 var cells = $(tr[i]).children("td"); 5 for( var j = 0 ; j < cells.length ; j++ ){ 6 if(typeof data[i] == "undefined") 7 data[i] = []; 8 data[i][j] = $(cells[j]).text(); 9 } 10 //どっちか!! 11 Display(data[i]); 12 //Display2(data[i]); 13 } 14 function Display(e){ 15 $("table").after('<div class="here">' + e + '</div>'); 16 } 17 function Display2(e){ 18 if(!$(".here").html().length){ 19 $(".here").html(e); 20 }else{ 21 $(".here").html($(".here").text() + '<br />' + e); 22 } 23 }

記述いただいたものを生かすとしたらこんな感じですかね?
あと、elementに両方入れないで別物なら別で要素に突っ込んであげたほうがいいきがするなー
いい感じにidふってあげるとかして。そのほうがなんか別の制御にも使いやすそう。

投稿2016/06/03 06:24

kogure

総合スコア299

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

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

MaShiRo_H

2016/06/03 06:27

記述したものを使ってくださりありがとうございますm(_ _)m すんなり理解できました! >あと、elementに両方入れないで別物なら別で要素に突っ込んであげたほうがいいきがするなー 確かにそうですね。。 その点も踏まえてもう一度自身で考えてみようと思います!
guest

0

ベストアンサー

単純につなげた文字列を出したいのであれば、そもそも一度配列に取り出す必要は無いと思います。
最初から文字列として結合していって、最後にそれを.hereに入れれば良いと思います。
ついでに、改行を入れたいのであれば.hereをdivではなくpreタグにするか、
改行のかわりにbrを入れたうえで.textで入れるのではなく.htmlで入れる必要があります。

Javascript

1var data = ""; 2var tr = $("table tr"); 3for( var i=0,l=tr.length;i<l;i++ ){ 4 if(i>0) { 5 data += "<br>"; 6 } 7 var cells = tr.eq(i).children(); 8 for( var j=0,m=cells.length;j<m;j++ ){ 9 if(j>0){ 10 data += ","; 11 } 12 data += cells.eq(j).text(); 13 } 14} 15$(".here").html(data);

投稿2016/06/03 05:54

masaya_ohashi

総合スコア9206

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

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

MaShiRo_H

2016/06/03 06:18

お早い回答、ありがとうございますm(_ _)m 早速実行したところ、うまくいきました! >そもそも一度配列に取り出す必要は無いと思います。 まさにおっしゃる通りです(^^;) 教えていただいた内容で進めたいと思います。 ありがとうございました!
guest

0

今Liveweaveで実行してみたのですが、うまくいきました。
ちょっとやってみてください
http://liveweave.com/

投稿2016/06/03 05:53

kimurayutaka

総合スコア71

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

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

MaShiRo_H

2016/06/03 06:17

ありがとうございます! 私が記載したコードでできた、ということなのでしょうか?? Liveweave自体存じ上げなかったので、よいサイトを教えていただきました^^ 今後活用していこうと思います!
kimurayutaka

2016/06/03 06:22

そうです。そのままでできました。 それはよかったです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問