• ベストアンサー

自動で表作成

ぜひご教授ください。 以前、問合せていただいたものの延長です http://oshiete1.goo.ne.jp/kotaeru.php3?q=2261428 データをhtmlに、ジャバスクリプトで表にしようとしていて、ジャバスクリプトファイル(a.js)とデータは別ファイル化(b.jsとc.js)することを前提にしています。 いざ作りはじめたところ、データが多いことがわかったので、表を2列にしたものにできないか、と考えたのですが、その場合、a.jsはどのように書き込めばよいのか、皆目検討がつきません。 よろしくお願いします。 ちなみに、今現在の状況はこうなっています。 a.js↓ html = '<TABLE cellpadding="3" cellspacing="2" width="100%">'   for (i=data.length-1;i>=0;i--) //昇順:  for (i=0;i<data.length;i++) //降順: for (i=data.length-1;i>=0;i--) { html += ' <TBODY><TR>' html += ' <TD bgcolor="#ffffff" onmouseover="this.style.backgroundColor='#8b0000'" onmouseout="this.style.backgroundColor=''"> ' html += ' <TABLE width="100%" cellpadding="1" cellspacing="0" bgcolor="#ffffff"> ' html += ' <TBODY><TR> ' html += ' <td><a href= ' +link[i]+' >' html += ' '+data[i]+ ' </td>' html += ' </tr></tbody></table>' html += ' </td></tr></tbody>' } html += '</table>' //書き出し document.write( html ) b.js↓ var data = new Array() data[50] = "aaaaa" data[49] = "bbbbb"  ↓ data[0] = "xxxxx" c.js↓ var link = new Array() link[50] = "049.html" link[49] = "048.html"  ↓ link[0] = "001.html"

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

  • ベストアンサー
回答No.3

降順の場合は・・ for(i=data.length-1;i>=0;i--){ str_html = str_html + '<tr><td><a href=' + link[i] + '>' + data[i] + '</td>'; --i; if(i==-1){ str_html = str_html + '<td></td></tr>'; }else{ str_html = str_html + '<td><a href=' + link[i] + '>' + data[i] + '</td></tr>'; } } 偶数か奇数か先に判別しておく(%2)方法が普通ですが・・ .

nsi2xpz
質問者

お礼

ありがとうございます。 ばっちりです! 助かりました

その他の回答 (2)

  • talepanda
  • ベストアンサー率58% (45/77)
回答No.2

素直に for(i=data.length-1;i>=0;i--){ str_html = str_html + '<tr><td><a href=' + link[i] + '>' + data[i] + '</td>'; --i; str_html = str_html + '<td><a href=' + link[i] + '>' + data[i] + '</td></tr>'; } とするのが吉かと。

nsi2xpz
質問者

お礼

ありがとうございます。 リンク先も表示もばっちりです。。。 が、一つ気がかりがあります。 今、データが偶数(実際40個あります)なので、表にうまくおさまっているのですが、奇数だった場合、最後のところは空欄でしょうか? 「undefined」とか出そうな気がするのですが…。 もしそうでしたら、出ないやり方はありますか?

  • STICKY2006
  • ベストアンサー率29% (1536/5269)
回答No.1

どーなってんだこりゃ。。。 テーブルがいくつも存在しているようだし、かといって、それの存在理由がイマイチ分からない。。。(汗 普通に1つのテーブルに横2列、縦複数行でいいんじゃない。。。? str_html = '<table>' for(i=data.length-1;i>=0;i--){ str_html = str_html + '<tr><td><a href=' + link[i] + '>' + data[i] + '</td>' str_html = str_html + '<td><a href=' + link[i--] + '>' + data[i] + '</td></tr>' } str_html = str_html + '</table>' ソースや記述ミスに責任は持ちません~。

nsi2xpz
質問者

お礼

ありがとうございます。 2つめのTDタグ内、 <a href=' + link[i--] + '>' + data[i] だと、なぜだか表示はうまくいきますが、リンク先が行ごとで同じになってしまいます。 -1をつけたり、data[i--]にしたりしてもうまくいきません。 どうしたものでしょうか。

関連するQ&A

  • 【CSS】表に線を入れる

    <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#999999"> <TBODY> <TR> <TD bgcolor="#ffffff"></TD> <TD bgcolor="#ffffff"></TD> </TR> <TR> <TD bgcolor="#ffffff"></TD> <TD bgcolor="#ffffff"></TD> </TR> </TBODY> </TABLE> これと同じ事をスタイルシートで表現したいのですが、どのようにしたら良いでしょうか? いろいろと試したのですが、外側だけ線が引かれたり中だけ引かれたりと、うまく出来ません。

    • ベストアンサー
    • HTML
  • このフレームを直してもらいたいのですが

    わかりにくいかとは思いますが、 下のようなフレームを作っています。 ―――――――――――――――――― |           | |           |   ここがない→ |________ |__________ |                          | |                          | |___________________| まず「田」のテーブルを作って、下段を結合して一つにすると、 以上のようになってしまいます。なぜでしょうか? ソースを書いておきますので、直してもらえませんでしょうか。 -------------------------------------------------- <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <P> <TABLE cellSpacing=0 cellPadding=0 bgColor=#000000 border=0> <TBODY> <TR> <TD bgColor=#000000> <TABLE cellSpacing=1 cellPadding=7 border=0> <TBODY> <TR> <TD bgColor=#ffffff colSpan=5> <P>aaaaa</P></TD> <TD bgColor=#ffffff>ここが消える→</TD></TR> <TR> <TD bgColor=#ffffff colSpan=6> <P>aaaaa</P></TD></TR></TBODY></TABLE> </TD></TR></TR></TBODY></TABLE></P> </BODY> </HTML>

    • ベストアンサー
    • 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=0 cellspacing=0 cellpadding=0> <tr> <td> <table border=0 bgcolor="#000000" cellspacing=1 cellpadding=1 width="230"> <tr bgcolor="#FFFFFF"> <td> 1 </td> </tr> <tr bgcolor="#FFFFFF"> <td> 2 </td> <tr bgcolor="#FFFFFF"> <td> 3 </td> </table> </td> </tr> </table> ----------------------------------------------- まではわかったのですが、 3と4を区切る方法がわかりません。 ご回答よろしくお願いします。

    • ベストアンサー
    • HTML
  • セルを透明に・・・

    以下のような表があります。 <TABLE cellpadding="3" cellspacing="1" bgcolor="#666666"> <TBODY> <TR> <TD bgcolor="#ffffff">項目1</TD> <TD bgcolor="#ffffff">内容1</TD> </TR> <TR> <TD bgcolor="#ffffff">項目2</TD> <TD bgcolor="#ffffff">内容2</TD> </TR> <TR> <TD bgcolor="#ffffff">項目3</TD> <TD bgcolor="#ffffff">内容3</TD> </TR> </TBODY> </TABLE> この状態で、壁紙を設定すると表の中は白でつぶれてしまいますよね。 これを表の中にも背景が出るようにすることは可能ですか? style="filter:alpha(opacity=0)"をいろいろなところに当てはめてみたのですが、うまく出来ませんでした。 何か方法はありますか?よろしくお願いします。

    • ベストアンサー
    • HTML
  • このような表をもっとスッキリさせるには?

    <table bgcolor="#000000" table style="font-size:12px" cellspacing="1" cellpadding="5" width="500" height=""> <colgroup width="20%"> <colgroup width="30%"> <colgroup width="50%"> <tr><td bgcolor="#FFFF00">あああ</td><td bgcolor="#FFFFFF">ああああ</td><td bgcolor="#FFFFFF">あああああ</td></tr> <tr><td bgcolor="#FFFF00">いいい</td><td bgcolor="#FFFFFF">いいいい</td><td bgcolor="#FFFFFF">いいいいい</td></tr> <tr><td bgcolor="#FFFF00">うううう</td><td bgcolor="#FFFFFF">うううう</td><td bgcolor="#FFFFFF">ううううう</td></tr> </table> ↑こんな感じで表を作っています。 【bgcolor="#FFFFFF"】のようなものがやたらに多いので、CSSを使ってもっとスッキリさせたいのですがどうCSSタグを配置したらよいのかわかりません。。 お分かりの方、是非教えてください!!

  • テーブル内のテーブルの高さを揃えたい。

    CGIの表示部分を改造中です。 下のソースをhtmlファイルにして見てもらったら判ると思うのですが、 <TABLE border="0"> <COL span="4" width="50"> <TR> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">こんな風に</TD> </TR> </TABLE> </TD> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">枠を置いたときに</TD> </TR> </TABLE> </TD> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">100%のサイズ指定しても合わない高さを</TD> </TR> </TABLE> </TD> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">ちゃんと揃えて配置したい</TD> </TR> </TABLE> </TD> </TR> </TABLE> 高さを100%にしても広がりませんでした。 どうにかして高さ(下の位置)を揃えることは出来ないでしょうか?

    • ベストアンサー
    • HTML
  • ホームページの表の作成について2…

    前回、『ホームページの表の作成について…』という質問をしました。 そして、 <table bgcolor="#000000" cellspacing="1" background="http://radiowind.web.fc2.com/backgroundtable"> <tr> <td bgcolor="#ffffff">あいうえお</td><td bgcolor="#ffffff">かきくけこ</td> </tr> <tr> <td bgcolor="#ffffff">さしすせそ</td><td bgcolor="#ffffff">たちつてと</td> </tr> </table> にしました。 でも、表の背景が表示されません。 どこが間違っているんでしょうか?

  • colspan セルの結合について

    テーブルタグで作ったセルを結合させようとcolspan タグを使用したのですが 縦線が消えてしまいます。何故なのか調べてもわからず困っています。 ソースを載せるのでよければお知恵を貸してください。お願いします。 <html> <head></head> <body bgcolor="blue"> <table border=0 bgcolor="#ffffff cellspacing=0 cellpadding=0> <tr> <td> <table border=0 cellspacing=1 cellpadding=3> <tr bgcolor="#000000"><td colspan="9">aaa</td></tr> <tr bgcolor="#000000"><td>ccc</td>yyy</td><td>aaa</td><td>ccc</td><td>yyy</td><td>aaa</td><td>ccc</td><td>yyy</td><td>aaa</td></tr> </table> </td> </tr> </table> <table border=0 bgcolor="#ffffff" cellspacing=0 cellpadding=0> <tr> <td> <br> <table border=0 bgcolor="#ffffff" cellspacing=0 cellpadding=0> <tr> <td> <table border=0 cellspacing=1 cellpadding=3> <tr bgcolor="#000000"><td colspan="9">aaa</td></tr> <tr bgcolor="#000000"><td colspan="3">ccc</td><td colspan="3">kkk</td><td colspan="6">mmm</td></tr> </table> </td> </tr> </table> <table border=0 bgcolor="#ffffff" cellspacing=0 cellpadding=0> <tr> <td> </body> </html>

  • Mac IEのバグなのでしょうか?

    TMEspionです。 <table border="0" cellpadding="5" cellspacing="5"><tr><td width="100" align="left" bgcolor="#999999"><table width="50" border="0" cellpadding="5" cellspacing="5"><tr><td align="left" bgcolor="#FFFFFF">左</td></tr><tr><td align="center" bgcolor="#FFFFFF">中</td></tr><tr><td align="right" bgcolor="#FFFFFF">右</td></tr></table></td><td width="100" align="center" bgcolor="#999999"><table width="50" border="0" cellpadding="5" cellspacing="5"><tr><td align="left" bgcolor="#FFFFFF">左</td></tr><tr><td align="center" bgcolor="#FFFFFF">中</td></tr><tr><td align="right" bgcolor="#FFFFFF">右</td></tr></table></td><td width="100" align="right" bgcolor="#999999"><table width="50" border="0" cellpadding="5" cellspacing="5"><tr><td align="left" bgcolor="#FFFFFF">左</td></tr><tr><td align="center" bgcolor="#FFFFFF">中</td></tr><tr><td align="right" bgcolor="#FFFFFF">右</td></tr></table></td></tr><tr><td align="left" bgcolor="#999999">左</td><td align="center" bgcolor="#999999">中</td><td align="right" bgcolor="#999999">右</td></tr></table> --------------------------------- 上記のソースの様に、テーブルを縦2段、横2列にセルを作り、上段はテーブルタグ、下段はテキストでそれぞれalign属性をleft、center,rightと設定しています。 ところがInternet Explorer 5.2 for Macで見ると、 上段右のテーブルタグは「align="right"」の効果が出ていません。 この質問を呼んでいる回答者様には、ブラウザでどう表示されるんでしょうか? どう表示されたかという結果とブラウザ名を教えて下さい。

    • ベストアンサー
    • HTML

専門家に質問してみよう