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

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

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

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

HTML

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

Q&A

解決済

2回答

1955閲覧

Dart の appendHtml について

hi_tag

総合スコア44

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

HTML

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

0グッド

3クリップ

投稿2014/07/21 02:08

Dartでテーブルを作成しようとして、<div> に appendHtml で <table></table> を追加したらテーブルとして表示されませんでした。
プログラム内で TabelElmenet をつくり、<div> に append したらテーブルとして表示されました。
この TableElement の中身は appendHtml で <tr></tr> を追加したものです。

appendHtml で追加できるタグ、追加できないタグがあるのでしょうか。
また、その違いは何でしょうか。

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

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

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

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

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

guest

回答2

0

ベストアンサー

コメントだとコードの貼り付けなどがうまくいかないようなので、新しい回答として記述します。

ご質問の追記にあるうまくいかないコードは次のようなものだと思います。
Element tbl = new Element.div(); tbl = querySelector('#tbl'); tbl.appendHtml('<table>'); for (int i = 0; i < codes.length; i++) { if (i == 0) { tbl.appendHtml('<tr><th>$d0</th><th>$d1</th></tr>'); } else { tbl.appendHtml('<tr><td>$d0</td><td>$d1</td></tr>'); } } tbl.appendHtml('</table>');

appendHtml は "任意の Html 片の追加" と書きましたが、引数のコードをそのまま差し込むようなメソッドでもありません。

appendHtml では次の手順で追加しています。

  1. 受け取ったコード片をパース
  2. パース結果を元に Element を作成
  3. 作成した Element を DOM ツリーに挿入

そのため、 appendHtml で開始タグと終了タグを別々に追加して挟むといったことはできません。
appendHtml に渡す Html 片が要素として整合性が取れていないので、期待どおりの結果になっていないのだと思います。

投稿2014/07/22 14:41

yohshiy

総合スコア863

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

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

hi_tag

2014/07/22 21:14

なるほど、そういうことでしたか。 開始タグと終了タグを一緒に追加してあげないといけないのですね。 ありがとうございました。
guest

0

table が表示されていないのはテーブルの中身がなくて見えていないということはないでしょうか。
追加するときに <tr> などの要素も含めて書いていると表示されると思います。
divelem.appendHtml("<table><tr><th>foo</th><td>bar</td></tr></table>");

appendHtml にはタグに制限はなく、むしろ任意の Html のコード片を追加するためのメソッドです。
その代わり追加した要素を Element として返すこともありません。

そのため、 appendHtml で追加した要素にアクセスしたい場合は Element として取得し直す必要があります。
divelem.appendHtml("<table id='test_tbl'></table>"); querySelector("#test_tbl").appendHtml("<tr><th>foo</th><td>bar</td></tr>");

投稿2014/07/21 10:21

yohshiy

総合スコア863

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

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

hi_tag

2014/07/21 21:18

yohshiyさん、回答ありがとうございます。 質問の条件が少なすぎてすみませんでした。appendHtmlは一度ではなく、複数回に分けて行っております。 質問に追記しましたが、初めに<table>のみ、次に<th>を含む行、次に<td>、最後に</table>といった感じです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問