テーブルの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で質問しましょう!
似たような質問が見つかりました
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- JavaScript javascriptでテーブルに追加した項目のid追加してローカルストレージを操作したい 5 2023/01/01 15:52
- 作詞・作曲 中森明菜『ミ・アモーレ』の歌詞では、ISAS打ち上げの小惑星探査機ハヤブサの数奇な運命を暗示してる? 2 2022/11/18 19:51
- その他(アウトドア) この舟はどうやって乗るのですか? 6 2022/03/27 09:14
- 工学 エジプトやマヤのピラミッド構造物は宇宙という未知の領域への推進機構をデザイン化・神格化したもの? 2 2022/11/01 05:05
- 地理学 映画『ガメラ対ゴジラ』は国際社会VSロシア連邦といった世界的危機の到来を予測していたのかもね? 2 2022/04/10 12:52
- テレビ テレビの買い替えを検討しています。(PanasonicのVIERAのTH-55JZ1000) 3 2022/06/12 17:02
- 洋画 映画『ヘルレイザー』(2022年)の最新作は勿論露国プーチン大統領。ウクライナ戦争を題材に構成? 1 2022/11/19 16:37
- 写真 ソニーα7R 初代にα7R(ILCE-7R❩に 下記レンズつけられますか SIGMA 30mm F1 1 2023/07/22 20:05
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
javascriptで画像の移動
-
html内>テーブル内に複数のjav...
-
javascriptで画像をテーブルに...
-
javascriptでスロットマシン
-
idの振り直しについて
-
クリックで指定のテーブルの背...
-
テーブルの行数を可変長にした...
-
クリックごとに文字色が交互に...
-
<JavaScript>tableタグを入力不...
-
プルダウンメニューを表の中に...
-
return trueとreturn falseの用...
-
追加ボタンを押した際に ok ボ...
-
チェックボックスのON/OFFでVal...
-
<form action="#">の意味とは?
-
jQuery セレクトボックスで選択...
-
フォームが空欄の時にフォーム...
-
【jQuery】input nameの文字列...
-
新しくフォルダを作成したい
-
javascriptの値をformのinput h...
-
正規表現で複数マッチ条件で悩...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<JavaScript>tableタグを入力不...
-
画面表示とともに、テーブルの...
-
selectのonChangeが動作しません
-
テーブルの行数を可変長にした...
-
テキストエリアに入力した改行...
-
【jQuery】tableループ内のIDの...
-
idの振り直しについて
-
プルダウンメニューを表の中に...
-
javascriptで画像をテーブルに...
-
javascriptで<table>背景色の取得
-
どこに挿入?
-
javascriptでクリックするごと...
-
jquery にて、アラートダイアロ...
-
Javascriptでテーブルタグの座...
-
動的なcheckboxのcheckedについて
-
javascriptで画像の移動
-
<iframe>内にHTMLをランダム表...
-
クリックごとに文字色が交互に...
-
javascriptでスロットマシン
-
連動テーブルのクロスハイライト
おすすめ情報