変数と文字を組み合わせて、表示させる方法は?

このQ&Aのポイント
  • 変数と文字を組み合わせて、表示させたい方法を教えてください。
  • 変数と文字を組み合わせて表示する方法でエラーが発生しました。
  • 変数と文字を組み合わせて表示するための効果的な方法を教えてください。
回答を見る
  • ベストアンサー

変数と文字を組み合わせて、表示させるには?

変数と文字を組み合わせて、表示させたいのですが、 何か良い方法はありませんか? エラーになり、表示できませんでした。 a = 1;の場合 普通は、 ID.innerHTML = '  サンプル'+a; とすると、「サンプル1」と表示されます。 ここは表示できました。 実際は、このように、 ID.innerHTML ='<TABLE width="150" bgcolor="#ffcccc">  <TR><TD>サンプルです</TD></TR><TABLE>';            ↑        ここに変数a の値を入れたかったのですが…  TABLEタグを入れて、色つきで表示したかったのですが、 文字と変数の組み合わせで、エラーになり、うまくいきませんでした。 何かよい方法はないですか? 教えて下さい。

質問者が選んだベストアンサー

  • ベストアンサー
  • ttyp03
  • ベストアンサー率28% (277/960)
回答No.1

こんな感じでできないですか? ID.innerHTML ='<TABLE width="150" bgcolor="#ffcccc">  <TR><TD>サンプル' + a + 'です</TD></TR><TABLE>';

sara555
質問者

お礼

早速の回答有難うございました。 出来ました。無事解決です。

関連するQ&A

  • safariで特定条件下でデーブル幅が効かなくなります

    safariでcolspanでセルを結合し、その中に大きい要素(下の例ですとwidth500pxの画像や、文字数60のテキスト領域)を入れると、他の行の幅が変わってしまいます。 スタイルシートでtd幅を指定してやったりしてみたのですが、どうしても幅が変わってしまいます。 何か解決方法等ございましたら、ご教授願います。 <table width="600" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="20%" align="center" bgcolor="#99FFFF">20%</td> <td width="80%" align="center">80%</td> </tr> <tr> <td colspan="2" align="center" bgcolor="#FFCCCC"><img src="http://cmm001.goo.ne.jp/img/sn/sn_50.gif" width="500" height="24"></td> </tr> </table> <br> <table width="600" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="20%" align="center" bgcolor="#99FFFF">20%</td> <td width="80%" align="center">80%</td> </tr> <tr> <td colspan="2" align="center" bgcolor="#FFCCCC"><form name="form1" method="post" action=""> <textarea name="textarea" cols="60"></textarea> </form> </td> </tr> </table> <br> <table width="600" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="20%" align="center" bgcolor="#99FFFF">20%</td> <td width="80%" align="center">80%</td> </tr> <tr> <td colspan="2" align="center" bgcolor="#FFCCCC">&nbsp;</td> </tr> </table>

    • ベストアンサー
    • HTML
  • ホームページの画像が表示されない

    宜しくお願いします。 忍者ホームページの簡単ホームページでホームページを作りましたが画像が表示されず コメントだけの表示に成ります。 忍者ホームページにアップロードした画像ファイル名は一致しております 幾度試しましたが同じ状態です 下記のHTMLは間違って居りますでしょうか困って居ります <table align="right"> <tr><td><img src="img142.jpg"width="250" height="250"></td> <td><img src="img004.jpg"width="250" height="250"></td></tr> <tr align="center"><td bgcolor="#ffcccc">ハイブリットフリウス</td> <td bgcolor="#66cc66">フーガハイブリット</td></tr> <tr><td><img src="img013.jpg"width="250" height="250"></td> <td><img src="img889.jpg"width="250" height="250"></td></tr> <tr align="center"><td bgcolor="#cc9900">ポルシェカレラ</td> <td bgcolor="#9999cc">フェラリーモンディアル</td></tr> </table>

  • クリックするとテーブルの列の背景色が変わる/元に戻る

    このサイトを参考に以下のサンプルを作りました。 「あるセルをクリックすると、そのセルと依存関係のあるセルすべての背景色を変更する。」 この例でいくと、 1.セルA1,A2のどれをクリックしても、列Aすべての色が変わる。 2.セルB1,B2のいずれかをクリックすると、列Aは元の色に戻り、列Bすべての色が変わる という動きを実現したいです。 2.機能を実現するにはどのようにすればよいのか、どなたかご存知の方ご教授のほどよろしくお願いいたします。 現時点のサンプル <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>テーブルの列の背景色を変える</title> <SCRIPT language="JavaScript"> <!-- function bgcolor(idName){ for ( i=0 ; i < document.all.item(idName).length ; i++ ) { document.all.item(idName, i).style.backgroundColor = "#EE3300"; } } //--> </SCRIPT> </head> <body> <TABLE border="1"> <TR> <TD width="30">&nbsp;</TD> <TD width="30">列A</TD> <TD width="30">列B</TD> <TD width="30">列C</TD> </TR> </TABLE> <TABLE border="1"> <TR> <TD width="30">行1</TD> <TD width="30" id="td1" onclick="bgcolor('td1')">A1</TD> <TD width="30" id="td2" onclick="bgcolor('td2')">B1</TD> <TD width="30" id="td3" onclick="bgcolor('td3')">C1</TD> </TR> </TABLE> <TABLE border="1"> <TR> <TD width="30">行2</TD> <TD width="30" id="td1" onclick="bgcolor('td1')">A2</TD> <TD width="30" id="td2" onclick="bgcolor('td2')">B2</TD> <TD width="30" id="td3" onclick="bgcolor('td3')">C2</TD> </TR> </TABLE> </body> </html>

  • 表の幅・高さ100%表示が、ブラウザによっては見え方が違う事ついて

    初めまして。お世話になります。 現在、ホームページを作成していますが、 分からない事がありますので、質問させて頂きました。 ホームページビルダーで、表(tableタグ)を使ったレイアウトを作成中です。 表の幅(width)と高さ(height)を共に100%で指定し、 表の中をセル(td)で細かく仕切り、その中に画像やテキストを配置し、 レイアウトしたいと思っています。 表のサンプルソースはこんな感じです。細かくてすみません…。 <TABLE border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"> <TR> <TD height="20" colspan="5"></TD> </TR> <TR> <TD height="1" bgcolor="#cccccc" colspan="5"></TD> </TR> <TR> <TD height="30" colspan="5"></TD> </TR> <TR> <TD height="1" bgcolor="#cccccc" colspan="5"></TD> </TR> <TR> <TD colspan="5" height="5"></TD> </TR> <TR> <TD rowspan="3"></TD> <TD rowspan="3" bgcolor="#0000ff" width="1"></TD> <TD height="1" width="700" bgcolor="#0000ff"></TD> <TD rowspan="3" bgcolor="#0000ff" width="1"></TD> <TD rowspan="3"></TD> </TR> <TR> <TD width="700"></TD> </TR> <TR> <TD width="700" height="1" bgcolor="#0000ff"></TD> </TR> </TABLE> 上記のソースでは表の中に、幅700pxの青色の四角いスペースを作っています。 しかし、ブラウザで見え方を確認しますと。 InternetExplorer、Opera、Sleipnirではうまく表示できますが、 Firefox、Lunascapeではうまく表示できません。 高さは大丈夫なのですが、 <TD height="1" width="700" bgcolor="#0000ff"></TD> <TD width="700"></TD> <TD width="700" height="1" bgcolor="#0000ff"></TD>等の、 width="700"が無視され、青色の四角いスペースまでもが、100%表示になってしまいます。 どのようなタグを書けば、どのブラウザでも正しく表示できるようになるのでしょうか? また、Firefox、Lunascapeのバージョンが古いのですが、 これらの影響もあるのでしょうか? Firefoxがバージョン1.5.0.2で、Lunascapeがバージョン3.5.4です。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • テーブルについて

    二つスライドが重なったようなテーブルを作りたいんですけど、一応、下記はそのように表示されたのですが、見え方で言うと、スライドの一枚目に文字を入れると、二枚目のスライドの形がずれてしまうのですがどうすればいいでしょう? <TABLE width="636" cellspacing="0"> <TBODY> <TR> <TD bgcolor="#0080ff" colspan="3" rowspan="2"></TD> <TD width="20" height="20"></TD> </TR> <TR> <TD bgcolor="#97cbff" width="20"></TD> </TR> <TR> <TD height="20" width="20"></TD> <TD bgcolor="#97cbff" colspan="2" width="596"></TD> <TD bgcolor="#97cbff" width="20" height="20"></TD> </TR> </TBODY> </TABLE>

    • ベストアンサー
    • HTML
  • 忍者簡単ホームページの画像が表示されない

    宜しくお願いします。 忍者ホームページの簡単ホームページでホームページを作りましたが画像が表示されず コメントだけの表示に成ります。 FFFFTPとかホストとか効きますが一度も利用したことが有りません HTMLはメモ帳で作成し画像は同じパソコンのデスクトップにフォルダーとして保存しております。 忍者ホームページにアップロードした画像ファイル名は一致しております 幾度試しましたが同じ状態です 下記はいま利用中のURLです宜しくお願いします。は間違って居りますでしょうか困って居ります http://qqai54.dousetsu.com/simpleVC_20110710164243.html ここはテーフルタグです。 <table align="right"> <tr><td><img src="img142.jpg"width="250" height="250"></td> <td><img src="img004.jpg"width="250" height="250"></td></tr> <tr align="center"><td bgcolor="#ffcccc">ハイブリットフリウス</td> <td bgcolor="#66cc66">フーガハイブリット</td></tr> <tr><td><img src="img013.jpg"width="250" height="250"></td> <td><img src="img889.jpg"width="250" height="250"></td></tr> <tr align="center"><td bgcolor="#cc9900">ポルシェカレラ</td> <td bgcolor="#9999cc">フェラリーモンディアル</td></tr> </table>

  • 2番目の子エレメントが見つからない

    はじめまして。 最近ホームページの本を買ってきて、ホームページを 作成し始めている者です。 ソース上、判らないことがあり、ご質問です。 単純に横2マスのセルを作りたかったのですが、 下記のソースだと、 2番目の子エレメントが見つかりません。 <table> エレメントtbodyが2番目の子エレメントとして見つかりません。 とのエラーが出てしまいます。 初級の質問で大変心苦しいですが、是非教えてください。 使用ソフト:GOLIVE 5.0 また、すでにホームページアップしたのですが SEO上、このようなエラーは 致命的なのでしょうか? <table width="480" border="0" cellspacing="0" cellpadding="0" bgcolor="#cccccc"> <td width="480"> <table width="480" border="0" cellspacing="0" cellpadding="0" bgcolor="#cccccc"> <tr> <td> <table width="480" border="0" cellspacing="1" cellpadding="10" bgcolor="#cccccc"> <tr> <td class=size2 valign="top" bgcolor="#ffffed" width="90">文字1<br> </td> <td class=size2 valign="top" bgcolor="white">文字2文字2文字2文字2<br> </td> </tr> </table> </td> </tr> </table> </td> </table>

    • ベストアンサー
    • HTML
  • テーブルサイズ指定

    こんにちは。 困ったことがあるのですが、 <TABLE BORDER="1"CELLSPACING=1 CELLPADDING=1 BGCOLOR="#FFFFFF"> <TBODY> <TR> <TD width=170文字</TD> <TD width=638>文字</TD></TR> <TR> <TD>文字</FONT></TD> <TD>文字</TD></TR> </TR></TBODY></TABLE> <BR> <TABLE BORDER="1"CELLSPACING=1 CELLPADDING=1 BGCOLOR="#FFFFFF"> <TBODY> <TR> <TD width=170>文字</FONT></TD> <TD width=638>文字</TD></TR> <TR> <TD>文字</FONT></TD> <TD>文字</TD></TR> </TBODY></TABLE> (それぞれの文字の長さは違います。) という2つのテーブルで、 2つともテーブルの幅が異なるんです。 これを、両方とも同じ幅にすることはできないでしょうか? 宜しくお願いします。

    • ベストアンサー
    • HTML
  • テーブルが二重で表示されてしまいます。

    <TABLE border=1 width="50" rules="cols" align="left" cellspacing="1" cellpadding="0" bordercolor="black"> <TR bgcolor="white"><TD><a href="test1.html">test</a></TD></TR> <TR bgcolor="white"><TD><a href="test2.html">test</a></TD></TR> </TABLE> このHTMLをIEで開くと、テーブルが二重に表示されてしまいます。 一本にしたいのですが、うまくいかなくて困っています。 どのようにすれば一本に出来るのでしょうか… どなたか詳しい方教えてください。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • IEではうまく行くのですが他のブラウザでも表示できるように…

    下記のようにしたのですが、IEではうまくゆくのですが、 他のブラウザではできません。 同じようにするにはどのように調整したらよいのか教えてください。 <DIV> <SPAN style="overflow:hidden;width:30px"> <TABLE border="1" width="100%"> <TR bgcolor="silver"><TD>A</TD></TR> </TABLE> </SPAN> <SPAN id="title" style="overflow-y:scroll;overflow-x:hidden;width:150px;"> <TABLE border="1" style="table-layout:fixed;width:150px"> <TR bgcolor="silver"><TD>C</TD><TD>D</TD><TD>E</TD></TR> </TABLE> </SPAN> </DIV> <!--本体部分--> <DIV> <SPAN id="fixedcols" style="overflow:hidden;overflow-x:scroll;width:30px;height:80px;"> <TABLE border="1" style="width:100%" bgcolor="#ffffcc"> <TR><TD>F</TD></TR> <TR><TD>K</TD></TR> <TR><TD>P</TD></TR> <TR><TD>U</TD></TR> </TABLE> </SPAN> <SPAN id="maincols" style="overflow:scroll;width:150px;height:80px" onscroll="fnc_scroll()"> <TABLE border="1" style="table-layout:fixed;width:150px"> <TR><TD>H</TD><TD>I</TD><TD>J</TD></TR> <TR><TD>M</TD><TD>N</TD><TD>O</TD></TR> <TR><TD>R</TD><TD>S</TD><TD>T</TD></TR> <TR><TD>W</TD><TD>X</TD><TD>Y</TD></TR> </TABLE> </SPAN> </DIV> <SCRIPT language="javascript"> <!-- function fnc_scroll(){ document.all.item('fixedcols').scrollTop=document.all.item('maincols').scrollTop; document.all.item('title').scrollLeft=document.all.item('maincols').scrollLeft; } --> </SCRIPT>

専門家に質問してみよう