前提・実現したいこと
投稿を印刷させる際に、フレームを選択(ここはモーダルでradioを使って取得しています)、記事を抜き取り、適切に配置し、それを印刷させる機能を作っています。
一部、テーブルから特定部分の文字を抜き出す処理が必要で、文字を抜き出すことはできました。
そして、ここからが質問内容になるのですが、
投稿によっては文字列を取得するテーブルが生成されず、その際はテーブルから抜き出すはずだった文字列が表示される部分に何も表示させないようにしようとしています。しかし、下のcodeの状態ではテーブルがある時に文字を表示することができます。
しかし、テーブルがない時にundefindを表示してしまいます。
HTMLは投稿された投稿を自動的に生成しているため、ソースはありません。
投稿の表示形式としては以下のような形になります。
APIで自動生成されてるため、この中にidなどを降ることはできないため、その上にIDをつけ、以下のような抜き出し方をしています。
HTML
1<h4> 2 <p> 3 <table> 4 <tr> 5 <td></td> 6 <td></td> 7 <td></td> 8 </tr> 9 </table> 10 </p> 11 <p>hogehoge</p> 12 <p>hugahuga</p> 13 <p>foofoo</p> 14 <p>...</p> 15 <p>..</p> 16</h4> 17
初心者なのでどんなcodeが良いcodeなのかもわかりません!もしよければその辺りも教えていただけると幸いです!
該当のソースコード
jquery
1$(function() { 2 $('.sample').on('click', function () { 3 var date = $('table td')[1]; //テーブル内の文字列取得 4 var name = $('table td')[3]; 5 var type = $('table td')[5]; 6 var size = $('table td')[7]; 7 var place = $('table td')[9]; 8 var how = $('table td')[11]; 9 var comment = $('h4 p').slice(1,-1).text(); 10 var areatext = document.getElementById("content"); //投稿内の文字列と 11 var areaimage = document.getElementById('image'); //画像の取得 12 var htmldoc = document.body.innerHTML; 13 14 date = date || ""; //undefinedを表示させない処理 15 name = name || ""; 16 type = type || ""; 17 size = size || ""; 18 place = place || ""; 19 how = how || ""; 20 21 $('button').click(function () { //選択されたフレームの取得部分 22 var radio = $('input[name="radio"]:checked').val(); 23 if (radio === 'frameone') { 24 frm = '<%= image_tag "red.png", style:"width: 100%;" %>'; 25 } else if (radio === 'frametwo') { 26 frm = '<%= image_tag "blue.png", style:"width: 100%;"%>'; 27 } else if (radio === 'framethree') { 28 frm = '<%= image_tag "green.png", style:"width: 100%;"%>'; 29 } else if (radio === 'framefour') { 30 frm = '<%= image_tag "orange.png", style:"width: 100%;"%>'; 31 } else if (radio === 'framefive') { 32 frm = '<%= image_tag "pink.png", style:"width: 100%;"%>'; 33 }; 34 35 window.document.body.innerHTML = //個々で印刷時のパーツ配置を作成 36 "<div class='frm'>" + frm + 37 "<div class='area'>" + areatext.innerHTML + 38 "<div class='img'>" + areaimage.innerHTML + "</div>" + 39 "<div class='top'>" + name.innerHTML + "</div>" + //ここから 40 "<div class='cell'>" + date.innerHTML + "</div>" + 41 "<div class='cell'>" + type.innerHTML + "</div>" + 42 "<div class='cell'>" + size.innerHTML + "</div>" + 43 "<div class='cell'>" + place.innerHTML + "</div>" + 44 "<div class='cell'>" + how.innerHTML + "</div>" + //この部分が問題 45 "<div class='comment'>" + comment + "</div></div></div>"; 46 window.print(); 47 document.body.innerHTML = htmldoc; 48 location.reload(); 49 }); 50 }); 51}); 52
試したこと
いろいろトライアンドエラーしてみたところ、
"<div class='top'>" + name + "</div>" + //ここから "<div class='cell'>" + date + "</div>" + "<div class='cell'>" + type + "</div>" + "<div class='cell'>" + size + "</div>" + "<div class='cell'>" + place + "</div>" + "<div class='cell'>" + how + "</div>" + //この部分が問題
このように書き換えると、テーブルが無いときは正常に非表示にできました。
しかし、これでテーブルがある場合に試すと、取得したテーブルの値が正常に表示できませんでした。
[object HTMLTableCellElement]
が表示されるだけでした。
どなたか、アドバイスをよろしくおねがいします!
補足情報
jquery 1.12.4
Rails 5.1.4
Ruby 2.4.2
ここにより詳細な情報を記載してください。
回答2件
あなたの回答
tips
プレビュー