javascriptでカレンダーを作る方法
- javascriptを使用してカレンダーを作成する方法について
- 指定のHTML要素内にカレンダーを表示するためのjavascriptの書き方
- 日曜日から始まるカレンダーの作成方法とセルに数字を表示する方法
- ベストアンサー
javascriptでカレンダーを作る方法
下に書いてあるjavascriptを書き換えて、一番上のマスごとにはsun・mon・tue・wed・thu・fri・satと書かれ、その下の水曜日(wed)のマスから順に1～30まで一マスごとに数字を入れられ、sun・5・12・19・26は赤文字で書かれ、1より前のマスや30以降のマスは空欄のカレンダーを作るにはどうすればいいでしょうか？ <!DOCTYPE html> <html lang="java"> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> <script> var table=document.createElement("table"); table.setAttribute("border",1); var tbody=document.createElement("tbody"); for(var i=0;i<4;i++){ var tr=document.createElement("tr"); for(var j=0;j<7;j++){ var td=document.createElement("td"); var txt=i*7+j+1; td.appendChild(document.createTextNode(txt)); tr.appendChild(td); } tbody.appendChild(tr); } table.appendChild(tbody); document.getElementsByTagName("body")[0].appendChild(table); </script> </body> </html>
- poidakepoi
- お礼率100% (2/2)
- その他（学問・教育）
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
やり方はいろいろありますが、一例です。 <!DOCTYPE html> <html lang="java"> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> <script> var youbi = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"]; var table=document.createElement("table"); table.setAttribute("border",1); var tbody=document.createElement("tbody"); for(var i=0;i<6;i++){ var tr=document.createElement("tr"); for(var j=0;j<7;j++){ var td=document.createElement("td"); if (i == 0) { var txt=youbi[j]; } else { var txt=(i-1)*7+j-2; if (txt < 1 || txt > 30) { txt = ""; } } td.appendChild(document.createTextNode(txt)); if (j == 0) { td.style.color='red'; } tr.appendChild(td); } tbody.appendChild(tr); } table.appendChild(tbody); document.getElementsByTagName("body")[0].appendChild(table); </script> </body> </html>
その他の回答 (1)
- hwoa1024
- ベストアンサー率36% (122/336)
>>数字と文字だけ赤くするにはどうすればいいと思いますか？ 回答に示した下記の部分になります。 td.style.color='red'; 何番目の列を赤にするかは if (j == 0) {} で指定しています。土曜を青にするなら if (j == 6) { td.style.color='blue'; } になります。 >>マスを全て同じ大きさにするにはどうすればいいと思いますか？ 幅はwidthになり、widthも上記と同様にstyleに属しますので td.style.width='150'; (この場合は幅150pxということです） で指定してやればいいです。 ただし、幅より文字列の方が長いと広がってしまうため 広がらない幅で設定してください。
お礼
追加で答えていただきありがとうございました。 本当に助かりました。
関連するQ&A
- borderの指定方法
var tbl = document.createElement("table"); var tbd = document.createElement("tbody"); var tr = document.createElement("tr"); var td = document.createElement("td"); td.appendChild(document.createTextNode("テストテーブル")); tr.appendChild(td); tbd.appendChild(tr); tbl.appendChild(tbd); DOMで書いたテーブルのTD要素のボーダーの指定方法で、下線だけ表示しないで枠をつけたいのですが、どのようにすればよいのでしょうか？ どなたか教えてください。 よろしくお願いします。
- 締切済み
- JavaScript
- javascript マウスイベント
動的に生成したテーブルのマウスイベントについてご質問します。 var body = document.getElementsByTagName("body")[0]; var tbl = document.createElement("table"); var tblBody = document.createElement("tbody"); for (var j = 0; j < 20; j++) { var row = document.createElement("tr"); for (var i = 0; i < 1; i++) { var cell = document.createElement("td"); var cellText = document.createTextNode("cell is row "+j+", column "+i); cell.id="dt1"; cell.height="15" cell.appendChild(cellText); row.appendChild(cell); } tblBody.appendChild(row); } tbl.id="tbl1"; tbl.width="200" tbl.appendChild(tblBody); body.appendChild(tbl); 上記のようなソースでテーブルを作成しています。 tbl.onmousedown このあたりだと思うのですが、記述方法がわからず困っています。 具体的には下記のような動きを目指してます。 http://www.programming-magic.com/20071215024226/ 初歩的な質問かもしれませんが、ご教授頂けると幸いです。
- ベストアンサー
- JavaScript
- DOM？ tableの記述について
よろしくお願いします。 tbody内をループさせて表示させるスクリプトを作ってみました。 ここで質問なのですが、表示内容を横にできるのでしょうか？ イメージとしては・・ A01 A02 A03 B01 B02 B03 を以下のように A01 B01 A02 B02 A03 B03 no のようにしたいのです。 ただのHTMLなら <html> <head> <title>test</title> </head> <body> <table border=0> <tr> <td> <table border=0> <tr><td>A01</td></tr> <tr><td>A02</td></tr> <tr><td>A03</td></tr> </table> </td> <td> <table border=0> <tr><td>B01</td></tr> <tr><td>B02</td></tr> <tr><td>B03</td></tr> </table> </td> </tr> </table> </body> </html> みたいな感じでできると思うんですが、以下のソースだと どうしても表示されなくなります。どこをどうすると よろしいでしょうか？どうかよろしくお願いします。 ------------------------------------------------- <html> <head> <title>TABLE TEST</title> <script> function tsample() { var mybody=document.getElementsByTagName("body").item(0); mytable = document.createElement("TABLE"); mytr = document.createElement("TR"); mytablebody = document.createElement("TBODY"); for(j=0;j<4;j++) { mycurrent_row=document.createElement("TD"); mytablet =document.createElement("TABLE"); for(i=0;i<3;i++) { mycurrent_cell=document.createElement("TR"); mycurrent_cen=document.createElement("TD"); currenttext=document.createTextNode("NO "+j+" LNO "+i+" "); mycurrent_cen.appendChild(currenttext); mycurrent_cell.appendChild(mycurrent_cen); } mycurrent_row.appendChild(mytablet); mytablebody.appendChild(mycurrent_row); } mytable.appendChild(mytablebody); mybody.appendChild(mytr); mybody.appendChild(mytable); mytable.setAttribute("border","2"); } </script> </head> <body onload="tsample()"> </body> </html>
- ベストアンサー
- JavaScript
- 記述方法について
よろしくお願いします。前回こちらで教えて頂いたソースを 基に表示するテーブルの並び方を変えたいと思っています。 理想の並び方は、例として くま さる くま さる ごりら これらを→ごりら うま うま りす りす というように読み込んだエクセルのレコードを2列ずつにして表したいのですが、可能でしょうか？ 以下のソースを基に、色々試したのですが、ブラウザ上には何も出てきません。 -------------------------------------------------------------- <html> <head> <title>TEST CSV IN</title> <script type="text/javascript"> function hoge(){ var TEST = document.getElementById("TEST"); var output = document.getElementById("OUTPUT"); var table = document.createElement("table"); table.setAttribute("border","1"); table.setAttribute("datasrc","#TEST"); var tbody = document.createElement("tbody"); var trs = new Array(); var tds = new Array(); TEST.Reset(); var rs = TEST.recordset; while (!rs.EOF){ var tbl = document.createElement("table"); table.setAttribute("border","1"); var td = document.createElement("td"); for(var i=1; i<2; i++){ var tr = document.createElement("tr"); trs[0] = document.createElement("tr"); trs[1] = document.createElement("tr"); trs[2] = document.createElement("tr"); tds[0] = document.createElement("td"); tds[1] = document.createElement("td"); tds[2] = document.createElement("td"); var img = document.createElement("img"); img.setAttribute("src",rs.fields(0)); img.setAttribute("alt",""); tds[0].appendChild(img); tds[1].innerText = rs.fields(1); tds[2].innerText = rs.fields(2); trs[0].appendChild(tds[0]); trs[1].appendChild(tds[1]); trs[2].appendChild(tds[2]); tr.appendChild(trs[0]); tr.appendChild(trs[1]); tr.appendChild(trs[2]); tbody.appendChild(tr); } rs.MoveNext; } table.appendChild(tbody); output.appendChild(table); } </script> </head> <body onload="hoge();"> CSV DATA IMPORT Ver MINO <p> <object id="TEST" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"> <param name="DataURL" value="cn.csv" /> <param name="UseHeader" value="true" /> <param name="TextQualifier" value="'"> <param name="FieldDelim" value=","> </object> <div id="OUTPUT"> </div> </body> </html> ------------------------------------------------------------- javascriptを始めたばかりなので、まだよく理解していないので 大変申し訳ありませんが、ご指導願えればと思います。 よろしくお願いします。
- ベストアンサー
- JavaScript
- color 属性が追加できない
<html><meta><script language="javascript"><!-- tr = document.createElement("tr"); tr.setAttribute("bgcolor", "black"); td = tr.appendChild(document.createElement("td")); td.appendChild(document.createTextNode("test")); tbody1.appendChild(tr); //--></script></head><body> <table><tbody id="tbody1"></tbody></table> </body></html> というソースなのですが，実行してもセルの背景が黒く塗りつぶされません。 setAttribute("width", "100px")などはきちんと適用されるのですが・・・。 setAttribute("style", "background-color: black;")としてもダメでした。 どのようにすればよいのでしょうか。 よろしくお願いします。
- ベストアンサー
- JavaScript
- javaScriptでカレンダーを作成したい
カレンダーをjavaScriptで作成しております。 tableをflexして２段のカレンダーです。 ①次へや前へのボタンを押すと前のが削除されず下へ増えていってしまいます。 ②矢印を２回押したら次の次の月を表示したいのができません。 ご教授お願いいたします。 Java Script let topicsData = [ ["1", "1日です"], ["4", "4日です"], ["9", "9日です"], ["15", "15日です"], ["27", "27日です"] ] function showProcess(year, month) { const lastday = new Date(year, month + 1, 0).getDate() + 1; const topics = new Array(); for (i = 0; i <= lastday; i++) { topics[i] = ""; } for (i = 0; i < topicsData.length; i++) { topics[topicsData[i][0]] = topicsData[i][1]; } //HTMLタグをつくる const table = document.getElementById("calendarleft"); for (let i = 1; i <= 15; i++) { let tr = document.createElement("tr"); //tdタグ(日付) let td = document.createElement("td"); td.textContent = i; //tdタグ(曜日) day = new Date(year, month, i); days = day.getDay(); weekjp = new Array("日", "月", "火", "水", "木", "金", "土"); weeks = weekjp[days]; let tdWeek = document.createElement("td"); tdWeek.innerText = weeks; //tdタグ(トピックス) let topicsText = document.createElement("td"); topicsText.innerText = topics[i]; console.log(topics[i]); //HTMLに表示させる document.querySelector('#header').innerHTML = (month + 1) + "月"; table.appendChild(tr); tr.appendChild(td); tr.appendChild(tdWeek); tr.appendChild(topicsText); } const table2 = document.getElementById("calendarright"); for (let i = 16; i < lastday; i++) { let tr = document.createElement("tr"); //tdタグ(日付) let td = document.createElement("td"); td.textContent = i; //tdタグ(曜日) day = new Date(year, month, i); days = day.getDay(); weekjp = new Array("日", "月", "火", "水", "木", "金", "土"); weeks = weekjp[days]; let tdWeek = document.createElement("td"); tdWeek.innerText = weeks; //tdタグ(トピックス) let topicsText = document.createElement("td"); topicsText.innerText = topics[i]; console.log(topics[i]); //HTMLに表示させる document.querySelector('#header').innerHTML = (month + 1) + "月"; table2.appendChild(tr); tr.appendChild(td); tr.appendChild(tdWeek); tr.appendChild(topicsText); } } const today = new Date(); let showDate = new Date(today.getFullYear(),today.getMonth(),1); window.onload = function () { showProcess(today.getFullYear(),today.getMonth()); }; function prev() { showProcess(showDate.getFullYear(),showDate.getMonth()-1); } function next() { showProcess(showDate.getFullYear(),showDate.getMonth()+1); }
- ベストアンサー
- JavaScript
- javascript でリンクを動的に変更する方法
下記のようなシステムを作成をしようと思っています。 javascript がまだあまり理解していない為ご教授いただければ幸いです。 質問としては追加ボタンで動的に追加した際に検索部分のリンクも一緒に動的に追加したいと考えています。 下記のリンクの「この部分」にも追加するごとにiの値が入るようにしたいと考えています。 <a href="#" onClick="window.open('store1.php?from=js&no=「この部分」','search_store1','width=540,height=540')">検索</a> 宜しくお願い致します。 サンプルコード <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script language="JavaScript"> <!-- var i = 1; var maxrows = 10; function hage() { i++; // Tbody への参照を取得します var mybody=document.getElementById("histTablebody"); mystore_row=document.createElement("TR"); mystore_row.setAttribute("id","histrow"+i); mystore_cell=document.createElement("TD"); mystore_cell.setAttribute("id","num"); currenttext=document.createTextNode(i); mystore_cell.appendChild(currenttext); mystore_row.appendChild(mystore_cell); mystore_cell=document.createElement("TD"); currenttext=document.createTextNode("店舗ID"); mystore_cell.appendChild(currenttext); mystore_row.appendChild(mystore_cell); mystore_cell=document.createElement("TD"); mystore_form.setAttribute("type","TEXT"); mystore_form.setAttribute("name","store_id" + i); mystore_form.setAttribute("value",""); mystore_form.setAttribute("id", "storecell"); mystore_cell.appendChild(mystore_form); mystore_form=document.createElement("INPUT"); mystore_form.setAttribute("type","TEXT"); mystore_form.setAttribute("name","store_name" + i); mystore_form.setAttribute("value",""); mystore_form.setAttribute("id", "storecell"); mystore_cell.appendChild(mystore_form); mystore_row.appendChild(mystore_cell); mystore_cell=document.createElement("TD"); //mystore_cell=document.createElement("a"); mystore_row.appendChild(mystore_cell); mybody.appendChild(mystore_row); document.register.delrow.disabled=false; if(i>=maxrows){ document.register.addrow.disabled=true; } } var hige = function() { var mytable=document.getElementById("histTablebody"); var removeTable=document.getElementById("histrow"+i); mytable.removeChild(removeTable); i--; if(i==1){ document.register.delrow.disabled=true; } // 追加ボタンを有効にする document.register.addrow.disabled=false; } var result = function() { alert(''); } //--> </script> </head> <body> <form name="register"> <div id="hist"> <table border="1"> <tbody id="histTablebody"> <tr id="histrow1"> <td id="num">1</td> <td>店舗ID</td> <td><input type="text" name="store_id1" id="storecell"><input type="text" name="store_name1" id="storecell"></td> <td> [<a href="#" onClick="window.open('store1.php?from=js&no=[]','search_store1','width=540,height=540')">検索</a>] </td> </tr> </tbody> </table> </div> <table> <tr> <td> <input type="button" id=addrow value="行を追加" onClick="hage();"> </td> <td> <input type="button" id=delrow value="行を削除" onClick="hige();" disabled="true"> </td> <td> <input type="button" value="登録" onClick="result()"> </td> </tr> </table> </form> </body> </html>
- ベストアンサー
- JavaScript
- tableの生成
お世話になります。 以下のソースはテーブルを生成するサンプルソースなんですけど、tdの中に配列の要素をきちんと表示させることが出来ません。 どうしたらちゃんと表示させることが出来るかご教授いただけないでしょうか？ *今は配列の要素がtdの中に全部入ってしまっている状態です。 <html> <head> <title>サンプルコード</title> <script> mylist = new Array( // データ定義 "Ａさんのホームページ", "Ｂさんのホームページ", "Ｃさんのホームページ", "Ｄさんのホームページ", "Ｅさんのホームページ", "Ｆさんのホームページ" ); function start() { var mybody=document.getElementsByTagName("body").item(0); //全ての body 要素リストをこのようにして取得// mytable = document.createElement("TABLE"); mytablebody = document.createElement("TBODY"); for(j=0;j<3;j++) { mycurrent_row=document.createElement("TR"); for(i=0;i<2;i++) { mycurrent_cell=document.createElement("TD"); currenttext=document.createTextNode(mylist); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); } mytablebody.appendChild(mycurrent_row); } mytable.appendChild(mytablebody); mybody.appendChild(mytable); mytable.setAttribute("border","2"); } </script> </head> <body> <script type="text/javascript"> start() </script> </body> </html>
- ベストアンサー
- JavaScript
- テーブルにおける行(セルにプルダウン含む）の追加方法
追加ボタンを押度に，テーブルに１行ずつ追加されるプログラムを組んでいるのですが，追加ボタンを押しても何も起こりません．1行には，テキストボックスとプルダウンメニューの２つのセルが含まれます．テキストボックスのみであれば，追加に成功します． プルダウンのメニュー項目の追加方法ではなく，プルダウン自体を複製して追加していきたいのですが，参考サイトが見つかりませんでした．また，各行を識別する為一意の名前をつけたいのですが，どう記述したらよろしいでしょうか． お手数おかけしますが，下記ソースのどこが間違っているのか，どう処理すべきなのかを，ご教示頂けますでしょうか．お願い致します． <BODY> <TABLE id="Table1"> <TR> <td class="cellWhite"><input type="text" value="単語入力" onFocus="cText(this)" onBlur="sText(this)" style="color:#999"></td> <td bgcolor="#5096C9" width="113px"> <select name="column"> <option value="00">赤</option> <option value="01">青</option> <option value="02">黄</option> </select></td></tr></TABLE> <INPUT TYPE="button" VALUE="行追加" onclick="addRow()"> <script language="JavaScript"> function addRow() { var tbl = document.getElementById("Table1").firstChild; if (!tbl.tagName) { tbl = document.getElementById("Table1");} var tr = document.createElement("tr"); var td1 = document.createElement("td"); td1.setAttribute("class","cellWhite"); var tx1 = document.createElement("input"); tx1.setAttribute("type","text"); tx1.setAttribute("value","単語入力"); tx1.setAttribute("onFocus","cText(this)"); tx1.setAttribute("onBlur","sText(this)"); tx1.setAttribute("style","color:#999"); td1.appendChild(tx1); var td2 = document.createElement("td"); var selectName="column";//selectの名前 var options={0:"赤",1:"青",2:"黄"}; var c=sel.firstChild; while(c){ if(c.name==selectName) sel.removeChild(c); c=c.nextSibling;} var e=document.createElement("select"); e.setAttribute("name",selectName); for(var i in options){ var o=document.createElement("option"); o.setAttribute("value",options[i]); o.appendChild(document.createTextNode(options[i])); e.appendChild(o);} sel.appendChild(e); tr.appendChild(td1);tr.appendChild(td2);tbl.appendChild(tr);}</script> 参考にしたサイトです： http://oshiete1.watch.impress.co.jp/qa4074195.html http://okwave.jp/qa299889.html
- ベストアンサー
- JavaScript
- appendChildとinnerHTMLを短く
テーブルの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"); ……
- ベストアンサー
- JavaScript
お礼
お答えしていただきありがとうございます。 質問するのは初めてなのでしっかり伝わっているか心配でしたが安心しました。ただ、私の説明不足で聞き忘れていましたが、 ・数字と文字だけ赤くするにはどうすればいいと思いますか？ ・マスを全て同じ大きさにするにはどうすればいいと思いますか？ 出来ればこの２つもお答えして頂ければ嬉しいです。 本当にありがとうございました。