締切済み

replace() メソッドで表を作れますか？

2023/03/08 05:41

HTMLの表(テーブル)は、通常、table, th, td などのタグを用いて作成します。私は、それに飽きてしまったので、それらのタグを使わずに replace() メソッドで表を作ることができました。【HTML】 <pre class="table"> No. ARTIST SONG TITLE RELEASE 01 Ava Max Salt 2019 02 Sia Move Your Body 2016 03 Ken Laszlo Hey Hey Guy 1984 04 The Weeknd Save Your Tears 2020 05 Suri Media Thuong Ly Biet 2021 06 Charlie Thompson Changed My Mind 2013 </pre> 皆さんでしたら、どんなコーディングで実現できますか？【条件】・元データのセル間はタブ区切り・createElement()を用いないこと・メソッドチェーンは可読性が劣るので不可　・CSSは用いずに、文字の太さ・セルの背景色も JavaScriptで設定

retorofan
お礼率86% (340/393)

JavaScript
回答数3
ありがとう数4

みんなの回答 （3）
専門家の回答

みんなの回答

babu_baboo
ベストアンサー率51% (268/525)

2023/03/11 09:12 回答No.3

そもそも論として <style> table tr:first-of-type { background: #ddc; } </style> で、いいだろうよ html, css で補えないときに script の出番であって提示していることは意味のない”縛り”であるコードを書く上でそのコードには意味を持たせて作るべきだ replace は「置き換える」の意味であり、「表を作る」には不適当だ作者が求めるコードを作り、意図した通りに動いているならばそれ以上弄る必要はない先進的なコードではなく、後進的な”縛り”のあるプログラムを書いて「動いたけど・・・」と自慢されても興味がない。

質問者

お礼 2023/03/11 11:33

私のこの質問の趣旨は、こういうことです。「JavaScriptで」「暇なときにでも」興味を持たれたら応じていただけますか？あくまでも、JavaScriptのコード一択で、「もし、貴方ならどうしますか？」と尋ねているのですから、「CSS別途でいいじゃないか」はどういうものなんでしょうかね。もし、興味を持たれたら、ご参加を！・JavaScriptで、・forループを用いずに、・replaceメソッドで表をコーディング

babu_baboo
ベストアンサー率51% (268/525)

2023/03/10 11:28 回答No.2

>メソッドチェーンは可読性が劣る使わずにできるの？ innerHTML を使う時点で文字列の連結作業となります。それで可読性？ｗｗｗ理解しようという気が無いだけでは？ <!DOCTYPE html> <meta charset="UTF-8"> <title></title> <body> <pre class="table"> No. ARTIST SONG TITLE RELEASE 01 Ava Max Salt 2019 02 Sia Move Your Body 2016 03 Ken Laszlo Hey Hey Guy 1984 04 The Weeknd Save Your Tears 2020 05 Suri Media Thuong Ly Biet 2021 06 Charlie Thompson Changed My Mind 2013 </pre> <script> document.body.innerHTML='<table border="1">'+ document.querySelector('pre.table').textContent.trim().replace (/^|\n/g,'<tr><td>').replace(/\t/g,'<td>'); document.querySelectorAll('tr:first-of-type td').forEach (e=>e.style.cssText ='color:red; font-size:large; background:#ddc'); </script>

質問者

お礼 2023/03/10 12:14

ご回答ありがとうございます。前の方のコメントに、書きました。＞・ループ処理そうしたデータ加工の方法もできますが、私は、それらを用いずに成しえました。貴殿でしたら、 forEachメソッドを用いなくてもできるのでは？

質問者

補足 2023/03/10 12:52

質問の一部を訂正させていただきます。【条件】の箇所 × ・メソッドチェーンは可読性が劣るので不可 ○・メソッドチェーンは可読性が勝るが不使用以上、よろしくお願いいたします。

superside0
ベストアンサー率64% (461/714)

2023/03/08 11:15 回答No.1

条件から考えると、JavaScriptで preタグのinnerHTMLプロパティーから取り出した文字列データを改行区切りやタブ区切りで分解させた配列に入れて、それをループ処理でtable tr th td構成のテキストデータを作って preタグのinnerHTMLをreplaceでそれと入れ替えるってことなんでしょうね。ただ、実用性で考えると、 HTMLファイルにあらかじめテキストデータ埋め込んでおいてそれをブラウザ上のJavaScriptでHTMLタグに組み替え直すという方法をとるよりもサーバー側のプログラムで、テキストファイルなりデータベースから取り出したデータをHTML化してブラウザに送り出したほうがブラウザのJavaScriptがOFF状態でも表示されますしブラウザによるJavaScriptの挙動の違いも考える必要もないしなにより、事前にHTMLファイルにデータを埋め込んでおく必要もないのでそのほうが　効率的なんじゃないかなとは思います。

質問者

お礼 2023/03/08 16:16

ご回答ありがとうございます。拝見させていただきました。・配列・ループ処理そうしたデータ加工の方法もできますが、私は、それらを用いずに成しえました。＞サーバー側のプログラムで、・・・・それだと「replace() メソッドを用いて作表」というテーマに沿わないことになりますので論外、ということになりますね。

replace() メソッドで表を作れますか？