HTMLベースで作成したカレンダーで、今日の日付にあたるセルに色をつける

###前提・実現したいこと
HTMLベースでカレンダーを作っています。
事情があって、javascriptで自動生成されるカレンダーではなく、HTMLで一つづつ記述したカレンダーを使っています。
このカレンダーで、「今日の日付」にあたるセルにだけ、色をつけたいです。

###発生している問題・エラーメッセージ
var today = new Date();で月と日を取得し、
document.getElementsByClassName('class');
などでクラスを追加すればいいかと思ったのですが、うまくいきません。

###該当のソースコード
カレンダーのソースは以下のような単純なものです。

###補足情報(言語/FW/ツール等のバージョンなど)
javascriptの知識が乏しく、何をどうすればいいのかわかりません…。
どなたかご教授頂けますと幸いです。
どうぞよろしくお願い致します。

行動規範の内容に同意します

回答3件

Xpathで日付が完全一致するノードを拾い、クラスを変更するといいでしょう。
入門者の方には難しいかもしれないので、サンプルを置きます。

サンプル

javascript
1document.evaluate( '//td[text()="' + new Date().getDate() + '"]', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null ).singleNodeValue.classList.add('today');

投稿2017/05/20 05:27

Lhankor_Mhy

総合スコア37488

isobel

2017/05/22 00:25

ありがとうございます！こちらも試してみたところ、うまく行きました。また使わせて頂きたいと思います。

行動規範の内容に同意します

まず、「今日の日付」がtableの何行目の何番目かを計算し、
(DateオブジェクトのgetDayメソッドで曜日が取得できます)

カレンダーtableの要素リストを取得し、
配列と同じ要領で上記、「何行目の何番目」を指定してあげればよろしいかと思います。

投稿2017/05/20 02:50

mogera

総合スコア14

isobel

2017/05/22 00:26

ありがとうございます！ javascriptについてあまりに無知なため、もう少し勉強します…。

行動規範の内容に同意します

ベストアンサー

jQueryを使っています。
JavaScriptでtodayクラスを追加した<td>要素にCSSの「今日」のスタイルが適用されます。

「id=calendarOfTheMonth → class=calendarOfTheMonth」
にするには、JavaScriptだけでなく、CSSも
「#calendarOfTheMonth → .calendarOfTheMonth」
にします。

3か月分対応にしました。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>calendarOfTheMonth</title>
6<style>
7/* カレンダー内の各日付のスタイル */
8.calendarOfTheMonth td {
9  text-align: right;
10}
11
12/* カレンダー内の「今日」のスタイル */
13.calendarOfTheMonth .today {
14  font-weight: bold;
15}
16</style>
17<script src="jquery-2.1.4.js"></script>
18<script>
19$(function() {
20	// 今日のDateオブジェクト
21	var today = new Date();
22	// 今月の「月」（数値）getMonth()は「月 - 1」を返す
23	var thisMonth = today.getMonth() + 1;
24	// 今日の「日」（数値）
25	var thisDate = today.getDate();
26
27	// カレンダー内の日付要素（<td>）ごとにループ
28	$('.calendarOfTheMonth.month-' + thisMonth + ' td').each(function() {
29		var date = parseInt($(this).text(), 10); // カレンダー内の「日」（数値）
30
31		if (date == thisDate) {
32			// 一致したら、その日付要素にtodayクラスを追加して、ループを終了
33			$(this).addClass('today');
34			return false;
35		}
36	});
37});
38</script>
39</head>
40<body>
41<table class="calendarOfTheMonth month-4">
42	<caption>4月</caption>
43	<tr>
44		<td></td><td></td><td></td><td></td><td></td><td></td><td>1</td>
45	</tr>
46	<tr>
47		<td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td>
48	</tr>
49	<tr>
50		<td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td>
51	</tr>
52	<tr>
53		<td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td>
54	</tr>
55	<tr>
56		<td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td>
57	</tr>
58	<tr>
59		<td>30</td>
60	</tr>
61</table>
62<table class="calendarOfTheMonth month-5">
63	<caption>5月</caption>
64	<tr>
65		<td></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
66	</tr>
67	<tr>
68		<td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td>
69	</tr>
70	<tr>
71		<td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
72	</tr>
73	<tr>
74		<td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td>
75	</tr>
76	<tr>
77		<td>28</td><td>29</td><td>30</td><td>31</td>
78	</tr>
79</table>
80<table class="calendarOfTheMonth month-6">
81	<caption>6月</caption>
82	<tr>
83		<td></td><td></td><td></td><td></td><td>1</td><td>2</td><td>3</td>
84	</tr>
85	<tr>
86		<td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
87	</tr>
88	<tr>
89		<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td>
90	</tr>
91	<tr>
92		<td>18</td><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td>
93	</tr>
94	<tr>
95		<td>25</td><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td>
96	</tr>
97</table>
98</body>
99</html>

投稿2017/05/20 08:13

編集2017/05/22 13:07

naomi3

総合スコア1105

isobel

2017/05/22 00:24

ありがとうございます！とてもわかりやすく、すぐに実現できました。本当に助かりました。 javascriptの基礎がわかっていない私でもスムーズに解決できましたので、ベストアンサーとさせて頂きます。ありがとうございました。

isobel

2017/05/22 00:54

度々恐れ入ります、またまた初歩的な質問で恐縮なのですが… tableが複数あるため、 ('#calendarOfTheMonth td')で指定しているcalendarOfTheMonthを、idではなくclassに変更するにはどうすればよいでしょうか？単純に('.calendarOfTheMonth td')で動作するかと思ったのですが、ダメでした…。 idに連番をふる方法も考えたのですが、うまくいかず…。お手数をお掛け致しますが、ご教授頂けますと幸いです。宜しくお願い致します。

Lhankor_Mhy

2017/05/22 09:23

横からですが、 return false; を削除すれば動作しそうな気がします。

isobel

2017/05/23 23:30

できました！本当にありがとうございます。嬉しいです…。ありがとうございました！

isobel

2017/05/23 23:32

Lhankor_Mhy様そうなんですね！ javascirptの基礎がわかってないので、単純そうなことがなかなか実現できず…。勉強もかねてトライしてみます。ありがとうございました！

行動規範の内容に同意します

あなたの回答