Q&A
Closed
初心者です。
カレンダーを作ったのですが、クリックしたらその日の日にちを取得し、別の日にちをクリックすると新たにクリックした日にちを取得するプログラムを作りたいです。
tableのtdの値を取得したいです。
(例) HTML
| 1 | 2 | 3 | 4 | 5 |
クリックしたらその日にちの枠の色が変わるようにすることはできました。
（現状) JS
$(function() {
$("td").on("click", function() {
$("td").removeClass("select");
$(this).addClass("select");
});
});
出力したいdivにidなどの目印を付けて上げれば出力出来ます。
<div id="clickedDate"></div>
JavaScript側は @nyandoraさんの回答を流用するとこんな感じかな？
$(function() {
$("td").on("click", function() {
$("td").removeClass("select");
$(this).addClass("select");
$("#clickedDate").text($(this).text())
});
});
日にち以外に年月日を出したいとかだとtdタグに工夫が必要で、
data属性で年月日情報を持たせてあげてそのデータを使うことで、
日付以外の情報なども取得することが可能ですよ。
<td data-date="2021/01/01">1</td>
$(function() {
$("td").on("click", function() {
$("td").removeClass("select");
$(this).addClass("select");
$("#clickedDate").text($(this).data("date"))
});
});
@x49_n
Questioner
以下のようにすると、「クリックした部分の日付」を取得できると思います。
$(function() {
$("td").on("click", function() {
$("td").removeClass("select");
$(this).addClass("select");
// text()メソッドを使えば、<td>で囲まれたテキスト部分を取得できます。
console.log($(this).text());
});
});
@x49_n
Questioner