こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

-広告-

解決済みの質問

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>

投稿日時 - 2015-12-07 01:41:28

QNo.9091817

すぐに回答ほしいです

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

やり方はいろいろありますが、一例です。

<!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>

投稿日時 - 2015-12-07 10:33:22

お礼

お答えしていただきありがとうございます。
質問するのは初めてなのでしっかり伝わっているか心配でしたが安心しました。ただ、私の説明不足で聞き忘れていましたが、
・数字と文字だけ赤くするにはどうすればいいと思いますか?
・マスを全て同じ大きさにするにはどうすればいいと思いますか?
出来ればこの2つもお答えして頂ければ嬉しいです。
本当にありがとうございました。

投稿日時 - 2015-12-07 13:35:03

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

-広告-
-広告-

回答(2)

ANo.2

>>数字と文字だけ赤くするにはどうすればいいと思いますか?
回答に示した下記の部分になります。
td.style.color='red';
何番目の列を赤にするかは
if (j == 0) {}
で指定しています。土曜を青にするなら
if (j == 6) {
td.style.color='blue';
}
になります。

>>マスを全て同じ大きさにするにはどうすればいいと思いますか?
幅はwidthになり、widthも上記と同様にstyleに属しますので
td.style.width='150';
(この場合は幅150pxということです)
で指定してやればいいです。
ただし、幅より文字列の方が長いと広がってしまうため
広がらない幅で設定してください。

投稿日時 - 2015-12-07 14:31:35

お礼

追加で答えていただきありがとうございました。
本当に助かりました。

投稿日時 - 2015-12-07 20:14:24

-広告-
-広告-

あなたにオススメの質問

-広告-
-広告-