JavaScriptとHTMLでテーブルを作成する方法

2023/08/10 17:29

このQ&Aのポイント

JavaScriptとHTMLを使用して、リストをテーブルに埋め込む方法について分からないことがあります。
strUniversityで保存された文字列をテーブルのヘッダーにし、forループを使用して配列内の値をULで表示し、各セルに配置して1つのテーブルを作成したいですが、うまくいきません。
どのようにすれば良いでしょうか？具体的なソースコードとスクリーンショットを以下に示します。

ベストアンサー

javascriptとhtmlでテーブル

2011/02/13 13:15

あの、分からないことがあります。 <UL>を使って表示したリストを今度はテーブルに埋め込みたいのですがどのようにしたら良いでしょうか？strUniversityで貯めた文字列をテーブルのヘッダーにしてfor文でarray内の値をULで表示してそれぞれをそれぞれのセルに入れて一つのテーブルを作りたいのですが失敗ばかりしてしまいます。どのようにしたら良いでしょうか？宜しくお願いします。スクリーンショットとソースは以下に。 <HTML> <HEAD> <LINK href="global.css" rel="stylesheet" type="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"/> <title></title> </HEAD> <BODY> <script type="text/javascript"> document.title="Courses" //Print document title var strUniversity = "State University"; var arrCourses =new Array(5); arrCourses[0]="English"; arrCourses[1]="Music"; arrCourses[2]="Geography"; arrCourses[3]="Information Systems"; arrCourses[4]="Chemistry"; document.write(strUniversity.toUpperCase()+"<br/>"); for(i=0; i<5; i++) { document.write("<UL><LI>"+arrCourses[i]+"</LI></UL>"); } </script> </BODY> </HTML>

isman
お礼率84% (22/26)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

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

ベストアンサー

toraneko75
ベストアンサー率51% (27/52)

2011/02/14 01:03 回答No.1

こういうことでしょうか？ <html> <head> <link href="global.css" rel="stylesheet" type="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"/> <title></title> </head> <body> <script type="text/javascript"> document.title="Courses" //Print document title var strUniversity = "State University"; var arrCourses =new Array(5); arrCourses[0]="English"; arrCourses[1]="Music"; arrCourses[2]="Geography"; arrCourses[3]="Information Systems"; arrCourses[4]="Chemistry"; document.write(strUniversity.toUpperCase()+"<table border><ul>"); for(i=0; i<5; i++) { document.write("<tr><td><li>"+arrCourses[i]+"</li></td></tr>"); } </script> </ul> </table> </body> </html>

質問者

お礼 2011/02/14 11:48

すごく助かりました。ありがとうございました。

関連するQ&A

javascript バブルソート
javascriptでバブルソートの実装をしています。リストにある数値を取得して昇順 or 降順したいのですがうまくいきません。方法を教えていただけないでしょうか。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <script type="text/javascript"> function bubbleSort(){ var liVal = document.getElementsByTagName("li"); var array = []; for(var i = 0; i < liVal.length; i++){ for(var j = 0; j < liVal.length-i-1; j++){ array[j] = parseInt(liVal[j].innerHTML); if(array[j] > array[j+1]){ var n = array[j]; array[j] = array[j+1]; array[j+1] = n; } } } } </script> </head> <body> <ul> <li>10</li> <li>5</li> <li>48</li> <li>22</li> <li>679</li> </ul> <p><a href="javascript:void(0);" onclick="bubbleSort()">ソート(降順)</a></p> </body> </html>
- 締切済み
- JavaScript
javascriptに関する質問です。
このコードを簡単に説明してください。なぜあまりが0になると、JSが動作するのかがわかりません。（child childrenのあたりも自分の頭がごちゃごちゃしています）よろしくお願いします。 <html> <head> <title>Hello DOM !</title> </head> <body> <div id="wrap"> <ul class="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </div> <script type="text/javascript"> var children = document.querySelector("#wrap .list").children; for(var i=0;i<children.length;i++){ var child = children[i]; if(i%2){ child.style.backgroundColor = "#EEEEEE"; } } </script> </body> </html>
- ベストアンサー
- JavaScript
スクリプトで<div id="links">
下記スクリプトで<div id="links"></div>のところを開いた瞬間 <ul> <li><a href="http://foo.com/">foo</a></li> <li><a href="http://bar.com/">bar</a></li> </ul> に変換したいのですがうまくいきませんどこをどのように変更すれば変換されるのでしょうか【スクリプト】 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript"> var URL = new Array("http://foo.com/","http://bar.co.jp/"); var TITLE = new Array("foo","bar"); // 表示用コンテナ var container = document.getElementById('links'); // リセット container.innerHTML=''; var ul=document.createElement('ul'); container.appendChild(ul); for(var i=0;i<URL.length;i++){ var li=document.createElement('li'); var a=document.createElement('a'); // 'href'属性の設定 a.setAttribute('href',URL[i]); // ラベル a.appendChild(document.createTextNode(TITLE[i])); li.appendChild(a); ul.appendChild(li); } </script> </head> <body> <div id="links"></div> </body> </html>
- 締切済み
- AJAX
javascriptで質問
javascript初心者です。日付で自動的に変わるようなメニューが作りたいのですがもっとシンプルに簡潔にできますか？また、開いているページのタブの色を他と変えたいのですができますか？以下ソース↓ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>スクリプトテスト</title> <style type="text/css"> .menu li{ list-style-type:none; float:left; border:solid 1px #666666; } .menu li a{ padding:5px; background:#eeeeee; display:block; } .menu li a:hover{ background:#ffffff; } </style> <script type="text/javascript">  </script> </head> <body> <ul class="menu"> <script type="text/javascript">  </script> <script type="text/javascript">  </script> <script type="text/javascript">  </script> <script type="text/javascript">  </script> <script type="text/javascript">  </script> <script type="text/javascript">  </script> <script type="text/javascript">  </script> </ul> </body> </html>
- 締切済み
- JavaScript
JavaScriptによるCSS変更がIE以外のFirefox,Operaなどで動作しない
id="tab"要素の背景画像positionをJavaScriptで動的に変更したいのですが、以下のソースではFirefox、Operaで動作しません。IEでは動作確認できました。原因がわからないのでこちらでお聞きすることにしました。よろしくお願いします。  <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="content-script-type" content="text/javascript" /> <link rel="stylesheet"href="test.css"type="text/css" /> <script type="text/javascript" src="test.js"></script> <title>test</title> </head> <body> <div id="javascript_tab_sample"> <ul class="tabstyle"id="tab"> <li><a href="###" onclick="effect1()">title1</a></li> <li><a href="###" onclick="effect2()">title2</a></li> <li><a href="###" onclick="effect3()">title3</a></li> </ul> </div> </body> </html> /*-- CSSソース --*/ ul.tabstyle { list-style:none; } div#javascript_tab_sample ul#tab { background:url('./backimg.png');/*デフォルト背景*/ float:left; width:100%; } div#javascript_tab_sample ul#tab li { height: 41px;/*縦幅*/ padding:0em 0; text-align:center; border-bottom:none; float:left; width:5em; } /*-- JavaScriptソース --*/ function effect1(){ var element1 = document.getElementById('tab'); element1.style.backgroundPositionY='0'; } function effect2(){ var element2 = document.getElementById('tab'); element2.style.backgroundPositionY='82'; } function effect3(){ var element3 = document.getElementById('tab'); element3.style.backgroundPositionY='41'; }
- ベストアンサー
- JavaScript
javascriptで合計を出力したいです
まず最初にソース載せます⇓ <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-type" content="text/html; charset=shift-jis"> <title>総合演習</title> </head> <body bgcolor="#FFFFFF"> <script type="text/javascript"> var ninzu2; var ninzu; ninzuu2=Number(ninzu); ninzu=prompt('人数を入力してください', '3');//人数を入力 var points2; var points; points2=Number(points) var points=new Array(); for(var i=0; i<ninzu; i++){ var anaswer; points[i] = anaswer; anaswer = prompt("点数を入力してください",""); var anaswer2; anaswer2=Number(anaswer); } var sum2; var sum=0; sum2=Number(sum); for(i=0; i<points.length; i++){ sum=+points[i]; } document.write(sum); </script> </body> </html> エラーはいっさいありません。ただ計算式が間違ってるだけです３回入力し、１回目10,　2回目20、　３回目30と入力すると出力結果は２０が返ってきました。要件は入力した数字分の合計を求めるという物です。けど２０が返ってくるってことは平均を出力しているってことですよね？考えてもわからなくってアドバイスお願いします。
- ベストアンサー
- JavaScript
IEだけで動きません。Javascriptに関する質問です。
IEだけで動きません。Javascriptに関する質問です。初心者です。よろしくお願いします。下記のページを作りました。 menuをクリックすると、ページが現れるようにしています。aaa.jsで制御しています。ページの高さがそれぞれ違うので、bbb.jsで高さを取得しています。 IEでは、bbb.jsのwindow.parent.document.getElementById('obj')で「オブジェクトがありません」とエラーが出て、動きません。他のブラウザでは動きました。どうしてでしょう？悩んでいます。どなたか教えてください。よろしくお願いいたします。 <html> 　　<head> <link rel="stylesheet" type="text/css" href="main.css" media="screen,print" /> <script type="text/javascript" src="aaa.js"></script> 　　</head> <body> 　　<div id="container"> 　　</div> 　　　　　　<div id="menu"> 　　　<ul> 　　　<li><a href="javascript:changeObj('a.htm')" title="a">a</a></li> 　　　<li><a href="javascript:changeObj('b.htm')" title="b">b</a></li> 　　　<li><a href="javascript:changeObj('c.htm')" title="c">c</a></li> 　　　</ul> 　　</div> 　　　　</body> </html> ***aaa.js*** /* オブジェクトの変更 */ function changeObj(html){ var contents = '<object id="obj" data="' + html + '" type="text/html"><\/object>'; window.document.getElementById('container').innerHTML = contents; } ***main.css*** /* obj */ #obj{ visibility:hidden; position:absolute; right:5%; min-width:560px; background-color:#CCFFFF; z-index:1; border-style:none; overflow:visible; } ***a.htm*** <html> 　<head> <script type="text/javascript" src="bbb.js"></script> 　</head> 　　<body> <div id="page-height"> <div id="a"> </div> </div> 　　</body> </html>
- ベストアンサー
- JavaScript
javascriptについて
javascriptに関してまだまだ初心者で困っております．作成したいプログラムは，画像をクリックすると，クリックした画像だけが"on.gif"になり，それ以外の画像は"off.gif"となるようなプログラムです．そこで以下のようなプログラムを作成したのですが，うまく動きません．ご助言頂ければ幸いです． <html> <head> <script type="text/javascript>  </script> </head> <body> <ul> <li><a href="JavaScript:changeImg(1)"><img src="on.gif" name="image[1]" /></a></li> <li><a href="JavaScript:changeImg(2)"><img src="off.gif" name="image[2]" /></a></li> </ul> </body> </html>
- ベストアンサー
- JavaScript
javascriptエラーについて教えてください。
メアドを直接ソースに書かないようにするためのjavascriptで外部ファイルを読み込むように実行してみたのですが、「実行しましたが、ページでエラーが発生しました。」となり、ライン：9　文字：1 エラー：‘CSAct’は宣言されていません。コード：0 という内容のメッセージが出ます。【HTML】 1：<HTML> 2：<HEAD> 3：<TITLE>情報</TITLE> 4：<meta http-equiv="content-type" content="text/html;charset=shift_jis"> 5：<LINK rel="stylesheet" href="××css" type="text/css"> 6：<script type="text/javascript" src="mail.js"></script> 7: <script type="text/javascript"> 8:  11: </script> 12: </HEAD> 13: <body>～【メアドの箇所】 E-mail：<script type="text/javascript"> </script> 【外部ファイル_mail.js】 function add_AAA(){ mail="AAA." + "BBB" + "@CCC.ne.jp"; document.write(mail.link("mailto:" + "AAA." + "BBB" + "@CCC.ne.jp")); } はっきり言ってjavascriptについて全然わかっていない超初心者です。。。このソースもよさそうなところから引っ張ってきただけなので、何をどう直していいのか、過去ログを見てもお手上げです。どなたかエラーの原因がお分かりになりましたらご教授いただけないでしょうか？よろしくお願いします。
- ベストアンサー
- その他([技術者向] コンピューター)
javespriptについて
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="css/top.css"> <title>地球船地球丸プロジェクト</title> <script type="text/javascript">  </script> </head> <body> </body> </html> と <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="css/top.css"> <title>地球船地球丸プロジェクト</title> <script type="text/javascript">  </script> </head> <body> </body> </html> うまくいきません間違っているのでしょうか
- ベストアンサー
- ブラウザ