テーブルのthタグと内容を追加したい
・下記で期待通り動作するのですが、冗長かなと思い、スッキリさせたいです
・どうすれば良いでしょうか?
var tr = document.createElement("tr");
tbody.appendChild(tr);
var th = document.createElement("th");
th.innerHTML = '見出1';
tr.appendChild(th);
var th = document.createElement("th");
th.innerHTML = '見出2';
tr.appendChild(th);
var th = document.createElement("th");
th.innerHTML = '見出3';
tr.appendChild(th);
var th = document.createElement("th");
……
No.2ベストアンサー
- 回答日時:
table要素にはAPIが用意されているので活用してみてください。
http://www2u.biglobe.ne.jp/~oz-07ams/prog/dom-re …
http://jsfiddle.net/6gjfbj9w/
> th.innerHTML = '見出1';
ただの文字列挿入に innerHTML を使用するのは好ましくありません。
# Re: re97さん
回答ありがとうございました。
>table要素にはAPIが用意されているので
・これまで一度も使用したことがなかったため、リンク先、大変参考になりましたー
>ただの文字列挿入に innerHTML を使用するのは好ましくありません
・アドバイスありがとうございます
・innerTextを使用するようにしますー
No.1
- 回答日時:
以下のような感じでどうでしょうか。
案1:関数を使って対応
function insertTh(tr, html){
var th = document.createElement("th");
th.innerHTML = html;
tr.appendChild(th);
}
var tr = document.createElement("tr");
tbody.appendChild(tr);
insertTh(tr, '見出1');
insertTh(tr, '見出2');
insertTh(tr, '見出3');
:
案2:配列をforループで回して対応
var htmls = [
'見出1',
'見出2,
'見出3
];
var tr = document.createElement("tr");
tbody.appendChild(tr);
for(var i=0; i<htmls.length; i++){
var th = document.createElement("th");
th.innerHTML = htmls[i]
tr.appendChild(th);
}
案3:jQueryで対応
var $tr = $('<tr></tr>');
$tr.append('<th>見出し1</th>');
$tr.append('<th>見出し2</th>');
$tr.append('<th>見出し3</th>');
回答ありがとうございました。
・こういう色々な書き方を知りたかったので、大変参考になりました
・jQueryも書いていただいたので、頭の中が整理できたような気がしますー
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<JavaScript>tableタグを入力不...
-
プルダウンメニューを表の中に...
-
Yahoo! UI LibraryのDataTable...
-
テキストエリアに入力した改行...
-
javascriptで表に画像を貼る
-
テーブル中に設けた背景画像を...
-
画面表示とともに、テーブルの...
-
return trueとreturn falseの用...
-
onchangeイベントを強制的に発...
-
追加ボタンを押した際に ok ボ...
-
プルダウン 項目が多いので先頭...
-
dijit.form.ComboBoxについて
-
slickのレスポンシブ > center...
-
javascript による POST 送信時...
-
フォーム内で記入したクエリ送...
-
selectを変更不可にしたい
-
VBSでブラウザ上のテキストボッ...
-
セレクトボックスの値から料金...
-
netscapeでもinnerTextやinnner...
-
イベント発生順序
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<JavaScript>tableタグを入力不...
-
テーブルの行数を可変長にした...
-
selectのonChangeが動作しません
-
画面表示とともに、テーブルの...
-
javascriptで<table>背景色の取得
-
javascriptでクリックするごと...
-
テキストエリアに入力した改行...
-
【jQuery】tableループ内のIDの...
-
<iframe>内にHTMLをランダム表...
-
javascriptで画像をテーブルに...
-
WEB制作に関する質問です。コン...
-
javascript でテーブル操作
-
カレンダーに印を付けたい
-
日にち指定によるテーブル/行の...
-
テーブルのtdの中に、重複避け...
-
innerHTMLでのテーブル作成
-
プルダウンメニューを表の中に...
-
簡単なJavaスロットマシーンに...
-
javascriptで表に画像を貼る
-
javascriptで画像の移動
おすすめ情報