javascript:tableのtdをタップした時の処理について

前提・実現したいこと

予約機能付きのカレンダーを実装しています。
フレームワークはruby on railsを使用しています。
カレンダーを実装するにあたりjavascriptを用いています。

tableのtdがデフォルトでは日にちと下に○が表示されていてtdクリック時に-となるようにしたいです。
javascriptに関しては最近勉強し始めたばかりなのであまり知識がありません。なのでサンプルコードを交えてご教示していただけると理解をしやすいのです。
よろしくお願いします。

###該当ソースコード

html
1<!-- カレンダー -->
2<p>今日:<input type="text" class="date"></p>
3<h3 class="calendar-title"><input type="button" name="lastM" value="先月"><span id="js-year"></span>年 <span id="js-month"></span>月<input type="button" name="nextM" value="先月"></h3>
4<table class="show">
5  <thead>
6    <tr><th>日</th><th>月</th><th>火</th><th>水</th><th>木</th><th>金</th><th>土</th></tr>
7  </thead>
8  <tbody id="js-calendar-body"></tbody>
9</table>

該当のソースコード

javascript
1var $window = $(window);
2var $year = $('#js-year');
3var $month = $('#js-month');
4var $tbody = $('#js-calendar-body');
5
6var today = new Date();
7var currentYear = today.getFullYear(),
8    currentMonth = today.getMonth();
9
10//表示カレンダーの月変更
11/*if ('lastM == click') {
12  $month =- 1;
13}else if ('nextM == click') {
14  $month =+ 1;
15}*/
16
17$window.on('load',function(){
18  calendarHeading(currentYear, currentMonth);
19  calendarBody(currentYear, currentMonth, today);
20});
21
22function calendarBody(year, month, today){
23  var todayYMFlag = today.getFullYear() === year && today.getMonth() === month ? true : false; // 本日の年と月が表示されるカレンダーと同じか判定
24  var startDate = new Date(year, month, 1); // その月の最初の日の情報
25  var endDate  = new Date(year, month + 1 , 0); // その月の最後の日の情報
26  var startDay = startDate.getDay();// その月の最初の日の曜日を取得
27  var endDay = endDate.getDate();// その月の最後の日の曜日を取得
28  var textSkip = true; // 日にちを埋める用のフラグ
29  var textDate = 1; // 日付(これがカウントアップされます)
30  var tableBody =''; // テーブルのHTMLを格納する変数
31　var on_of = ["○","-"];//○とーの判定について
32
33  for (var row = 0; row < 6; row++){
34    var tr = '<tr>';
35
36    for (var col = 0; col < 7; col++) {
37      if (row === 0 && startDay === col){
38        textSkip = false;
39      }
40      if (textDate > endDay) {
41        textSkip = true;
42      }
43      var addClass = todayYMFlag && textDate === today.getDate() ? 'is-today' : '';
44      var textTd = textSkip ? '&nbsp;' : textDate++;
45      var td = '<td class="'+addClass+'">'+textTd+'<br>'+on_of[0]+'</td>';//ここで判定
46      tr += td;
47    }
48    tr += '</tr>';
49    tableBody += tr;
50  }
51  $tbody.html(tableBody);
52}
53
54function calendarHeading(year, month){
55  $year.text(year);
56  $month.text(month + 1);
57}

試したこと

//補足
デフォルトで○が表示される処理までなんとか出来ました。

var td = '<td class="'+addClass+'">'+textTd+'<br>'+on_of[0]+'</td>';

関数calendarbody内でif文で条件分岐してみたのですが、クリック時の処理の書き方が分かりませんでした。

補足情報（FW/ツールのバージョンなど）

rails5.2

m.ts10806

2018/12/24 19:32 編集

この内容だけだとRails関係ないのでは。またクリック時にｰにするとしてもその先の処理も見据えて作らないと意味がなさそうです。文字変えてるだけでどこにも保存してませんよね

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

回答2件

ベストアンサー

JavaScriptで動的に作られた要素のイベントを取得するならdocumentから辿ってイベントを取得する必要があります。

js
1$(function(){
2    $(document).on("click","td",function(){
3        console.log($(this).index("td"));
4        console.log($(this).text());
5    });
6});
7

動的に生成したDOM要素に対してjQueryでイベントを設定する場合

ただ、コメントに書いたことを再掲しますが、
クリック時に－にするとしてもその先の処理も見据えて作らないと意味がなさそうです。
文字変えてるだけでどこにも保存してませんよね。
せめてhiddenで値を持って置くようにするとか工夫された方が良いです。
data属性とかlocalStorageとかに持っておいてDB登録時に拾って送信するとかでも良いですが。

投稿2018/12/25 01:01

m.ts10806

総合スコア80888

退会済みユーザー

2018/12/25 04:55

その先の処理についてはDBで保存する予定なのですがどの型で保存すべきかが分からないので今回の質問にはその先の処理についての記述を控えました。単純に考えるとstring型で保存すればいいのかなと考えているのですが、どの型で保存すべきなのかご教示お願い致します。

m.ts10806

2018/12/25 04:57

設計、仕様次第なのでなんとも。「決めてください」としか言えません。

退会済みユーザー

2018/12/28 03:16

railsのフレームワークでjavascriptにカラムのデータを渡すことは可能なのでしょうか？

m.ts10806

2018/12/28 03:18

何がしたいのかなんのデータなのか分からないですが、ビューでJavaScriptで使える文字列として出力すれば良いだけではないでしょうか。それかAjaxでJavaScriptからデータを取りに行くか。それも要件次第ですね

退会済みユーザー

2018/12/28 03:31

カレンダーの丸ばつについての編集内容を保存したいだけです。やりたいことしては、そこまで難しくは無いかと思うのですが、javascriptを使ったデータの受け渡しが分からなくて...

m.ts10806

2018/12/28 03:39

簡単なのはinputhのhiddenを用意しておいて○なり×なり切り換えたときに valueを変更してform送信することです。カレンダー全体をひとつのformとしてもいいし、日付ひとつひとつでもいい。nameで日付が特定できればいいので。もし「切り替えたらその場でDB更新」ならAjaxでフレームワークの更新処理に投げる。

m.ts10806

2018/12/28 03:45

DBとのやり取り前提ならカレンダー自体もRailsのviewで組んでしまった方がやりやすいとは思います。 GETパラメータで年月渡してカレンダーの日を動的に切り替えるのもJavaScriptよりはやりやすいですし、そもそも初期はDBの情報があれば表示させることになるわけですし(AjaxやLocalStorageなど組み合わせればJavaScriptでテーブル組み作っててもできなくはないですが煩雑な作りになりますし)

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