- 締切済み
replace() メソッドで表を作れますか？
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% (314/362)
- JavaScript
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- babu_baboo
- ベストアンサー率51% (268/525)
- babu_baboo
- ベストアンサー率51% (268/525)
>メソッドチェーンは可読性が劣る 使わずにできるの？ 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>
お礼
ご回答ありがとうございます。 前の方のコメントに、書きました。 ＞・ループ処理 そうしたデータ加工の方法もできますが、 私は、それらを用いずに成しえました。 貴殿でしたら、 forEachメソッドを用いなくてもできるのでは？
補足
質問の一部を訂正させていただきます。 【条件】の箇所 × ・メソッドチェーンは可読性が劣るので不可 ○・メソッドチェーンは可読性が勝るが不使用 以上、よろしくお願いいたします。
- superside0
- ベストアンサー率64% (453/701)
条件から考えると、JavaScriptで preタグのinnerHTMLプロパティーから取り出した文字列データを 改行区切りやタブ区切りで分解させた配列に入れて、 それをループ処理でtable tr th td構成のテキストデータを作って preタグのinnerHTMLをreplaceでそれと入れ替えるってことなんでしょうね。 ただ、実用性で考えると、 HTMLファイルにあらかじめテキストデータ埋め込んでおいて それをブラウザ上のJavaScriptでHTMLタグに組み替え直すという方法をとるよりも サーバー側のプログラムで、テキストファイルなりデータベースから取り出したデータをHTML化してブラウザに送り出したほうが ブラウザのJavaScriptがOFF状態でも表示されますし ブラウザによるJavaScriptの挙動の違いも考える必要もないし なにより、事前にHTMLファイルにデータを埋め込んでおく必要もないので そのほうが 効率的なんじゃないかなとは思います。
お礼
ご回答ありがとうございます。 拝見させていただきました。 ・配列 ・ループ処理 そうしたデータ加工の方法もできますが、 私は、それらを用いずに成しえました。 ＞サーバー側のプログラムで、・・・・ それだと 「replace() メソッドを用いて作表」 というテーマに沿わないことになりますので 論外、ということになりますね。
関連するQ&A
- tableタグで作るような表をCSSで作る方法
一つのページに表（横：600px、縦：155px）を20～30個くらい表示させたいのですが、tableタグを多用するとページが重くなると聞きました。 そこで、CSSを使って表を作ろうと思うのですが、どのように作れば良いのか分かりません。 ご存知でしたら教えてください。 私が作りたい表は下記になります。 XHTML 1.0 Transitional 横幅：600px 縦幅：155px 4行3列で、一番左の列の4行を繋げて(tableタグでの記述は<td rowspan="4">）一つの空間になっているのもの。 セルとセルの間隔は5pxのもの。 HTMLとCSSの記述を教えていただけると幸いです。 よろしくお願いします。
- ベストアンサー
- HTML
- 表の一部のセルの背景色を変更したい
いつもお世話になっております。 IE6.0上で動作するものとして質問させていただきます。 以下のソースの中でBODYタグのonloadイベントで initメソッドを呼びだし、メソッド中で 表中の任意のセルの背景色を変更するにはどのように すればよいのでしょうか。 --------------------------------------- <HTML> <HEAD> <script language="JavaScript"> <!-- function init(){ //------ここでで各セルの背景色を変更したいのです。 } --> </script> </HEAD> <BODY onload="init(); "> <FORM name="tttt"> <TABLE border="1" > <TBODY> <TR> <TD onClick="this.style.backgroundColor = 'black';">test</TD> <TD onClick="this.style.backgroundColor = 'red';">test</TD> <TD onClick="this.style.backgroundColor = 'yellow';">test</TD> </TR> </TBODY> </TABLE> </FORM> </BODY> </HTML> --------------------------------------- ソースは簡略化しておりますので、内容に不備がございましたら、ご容赦ください。 ご回答をよろしくお願いいたします。
- ベストアンサー
- HTML
- [HTML+TABLE]空欄のセルの処理の仕方・・・。
お世話になります。 ＨＴＭＬでＴＡＢＬＥタグで表を作る際に、内容が何も入っていないタグがあるとします。 その場合、そのセルが浮き上がった？状態になりますよね？ スペースと入れてやると他の文字が入っているセルと同じようにへこんだ状態になります。 ＨＴＭＬタグやなんかでこれをスペースも入っていない状態でもへこんだ状態にする方法はありませんか？スペースを入れたほうが早いのは早いと思いますが・・・。 宜しくお願い致します。
- ベストアンサー
- HTML
- ネットスケープナビゲーターでの表と表の間の空白について
HTMLでWEBサイトを現在製作しています。 その際に<table>タグで表を２つ（幅500ピクセルくらいです）、縦に並ぶように配置したのですが、インターネットエキスプローラーで見ると普通に並んでいるのですが、 ネットスケープナビゲーターで見ると、上の表と下の表の空白が、およそ30から50ピクセルくらいあいてしまいます。 空白があき過ぎのように思いますが、これはブラウザーの特性でしょうか？他のサイトさんではあまり見かけないように思うのですが。 意味がないかも知れませんが、HTMLで上の表の最後の</TABLE>と下の表の最初の<TABLE>の間も一文字も隙間が無いようにしています。 そして<TABLE>の属性は、 cellspacing="0" border="0" cellpadding="0" にしています。 上の方の表は高さも指定しています。 下の表は高さの指定はしていません。 お手数ですが解決方法をご存知の方、お願い申し上げます。
- ベストアンサー
- HTML
- htmlタグで表を作りたい
htmlタグで表を作りたい ｈｔｍｌで添付したような表をつくりたいのです。 １． 外枠を太くする ２． 中の線を点線にする ３． 左は項目ごとにセルを結合する どう入力したらこのようになるでしょうか？ 教えて下さい。お願いします。
- 締切済み
- その他（インターネット・Webサービス）
- table を配列で取得
HTML のtableタグで生成した表の各セルの値を、 PHPの配列で取得するやり方があるらしいのですが。 どのように記述するのでしょうか？ サンプル等がありましたら、教えてください。
- ベストアンサー
- PHP
- 縦書きのＨＴＭＬファイル
ＨＴＭＬで縦書きをしよう <pre>タグや<table>タグなどを使って無理矢理縦書きのように見せているホームページを 視覚障害者の為に、横書きのＨＴＭＬに直そうと （テキスト形式）思うのですが どうすれば いいでしょうか？
- ベストアンサー
- HTML
- Word版ＶＢで表の任意の箇所を取得する（Cellメソッド）
Visual Basic でワードの表を操作する際の方法をお伺いします。 通常は、Cellメソッドを利用して、 ActiveDocument.Tables(1).Cell(2,3) のように、Cellメソッドに行・列を引数として与えますが、セルが結合されている場合に引数はどのように指定するのでしょうか。 会社のＰＣだと結合されたセルは飛ばして列数を数えているようでしたが、自分のＰＣだと結合されたセルも数えています。結合されている（他に併合された）セルの行・列を指定するとエラーがでます。 Wordのバージョンによっても違うのでしょうか。あるいはTableオブジェクトのプロパティか何かを指定することで、結合されたセルを数えるかどうかを指定できるのでしょうか。
- 締切済み
- Visual Basic
- 表とリスト（ulとtable）の違いについて教えてください。
表とリスト（ulとtable）の違いについて教えてください。 HTMLでは、ulがリストで、tableが表を作るときに使用します。 リストとは、お問い合わせリストや、相互リンクリストなど、 一覧のような使い方もします。 表も同じように、アクセス結果表や、売上飲料水ランク表など、 これも、一覧のような使い方をします。 （言葉上での解釈） HTML上で出来ないことは、ulの方は、tableで言うtdタグがなく、 一行一単語という感じですよね。 だけどこれは、レイアウト上の問題であって、 レイアウトのためにタグを選択するのは間違っています。 タグを正しく使うために、 表とリストの違い、つまり、ulとtableの違いを知らないといけません。 参考になればとも思っているので、 正しい答えがわからなくても、 「僕はこう思ってる」や 「僕はこう使い分けてる」というのでも教えてください。
- ベストアンサー
- HTML
- 表(Table )の中の文字を一括で、
表(Table )の中の文字を一括で、ＦＯＮＴＳＩＺＥ＝６、Times New Roman にしたいのですが、毎回セルごとに指定せずに、＜Ｔａｂｌｅ＞＜／Ｔａｂｌｅ＞のHTMLで処理できる簡単な、出来れば最も簡単な方法を教えてください。
- ベストアンサー
- HTML
お礼
私のこの質問の趣旨は、こういうことです。 「JavaScriptで」「暇なときにでも」 興味を持たれたら応じていただけますか？ あくまでも、JavaScriptのコード一択で、 「もし、貴方ならどうしますか？」 と尋ねているのですから、 「CSS別途でいいじゃないか」は どういうものなんでしょうかね。 もし、興味を持たれたら、ご参加を！ ・JavaScriptで、 ・forループを用いずに、 ・replaceメソッドで表をコーディング