質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.64%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,104
退会済みユーザー

退会済みユーザー

前提・実現したいこと

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

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

該当ソースコード

<!-- カレンダー -->
<p>今日:<input type="text" class="date"></p>
<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>
<table class="show">
  <thead>
    <tr><th></th><th></th><th></th><th></th><th></th><th></th><th></th></tr>
  </thead>
  <tbody id="js-calendar-body"></tbody>
</table>

該当のソースコード

var $window = $(window);
var $year = $('#js-year');
var $month = $('#js-month');
var $tbody = $('#js-calendar-body');

var today = new Date();
var currentYear = today.getFullYear(),
    currentMonth = today.getMonth();

//表示カレンダーの月変更
/*if ('lastM == click') {
  $month =- 1;
}else if ('nextM == click') {
  $month =+ 1;
}*/

$window.on('load',function(){
  calendarHeading(currentYear, currentMonth);
  calendarBody(currentYear, currentMonth, today);
});

function calendarBody(year, month, today){
  var todayYMFlag = today.getFullYear() === year && today.getMonth() === month ? true : false; // 本日の年と月が表示されるカレンダーと同じか判定
  var startDate = new Date(year, month, 1); // その月の最初の日の情報
  var endDate  = new Date(year, month + 1 , 0); // その月の最後の日の情報
  var startDay = startDate.getDay();// その月の最初の日の曜日を取得
  var endDay = endDate.getDate();// その月の最後の日の曜日を取得
  var textSkip = true; // 日にちを埋める用のフラグ
  var textDate = 1; // 日付(これがカウントアップされます)
  var tableBody =''; // テーブルのHTMLを格納する変数
 var on_of = ["○","-"];//○とーの判定について

  for (var row = 0; row < 6; row++){
    var tr = '<tr>';

    for (var col = 0; col < 7; col++) {
      if (row === 0 && startDay === col){
        textSkip = false;
      }
      if (textDate > endDay) {
        textSkip = true;
      }
      var addClass = todayYMFlag && textDate === today.getDate() ? 'is-today' : '';
      var textTd = textSkip ? '&nbsp;' : textDate++;
      var td = '<td class="'+addClass+'">'+textTd+'<br>'+on_of[0]+'</td>';//ここで判定
      tr += td;
    }
    tr += '</tr>';
    tableBody += tr;
  }
  $tbody.html(tableBody);
}

function calendarHeading(year, month){
  $year.text(year);
  $month.text(month + 1);
}

試したこと

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

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


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

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

rails5.2

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2018/12/25 04:31 編集

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

    キャンセル

回答 2

checkベストアンサー

+2

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

$(function(){
    $(document).on("click","td",function(){
        console.log($(this).index("td"));
        console.log($(this).text());
    });
});

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/12/28 12:31

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

    キャンセル

  • 2018/12/28 12:39

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

    キャンセル

  • 2018/12/28 12:45

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

    キャンセル

0

クリック時の処理の書き方が分かりませんでした。

問題がここだと思うなら、そこを調べることからはじめて、応用はその後にしましょう。
「○○した時の処理」は「jQuery ○○ イベント」で検索するところから始めてください。

【jQuery クリック イベント - Google 検索】
https://www.google.co.jp/search?num=100&safe=off&q=jQuery+クリック+イベント

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/12/25 00:51

    jqueryでのクリックイベントの書き方は分かるのですがtdにクリック機能の持たせかたが分からないです。
    質問欄には乗せてないのですが$('td').click(function()で書いてみましたがクリック出来ませんでした。

    キャンセル

  • 2018/12/25 00:56

    試したことを質問文に追記してください。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.64%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る