タイムスロットセルをドラッグしてタイムスロットを選択しています。タイムスロットを選択した後、テキストボックスに名前を入力すると、そのタイムスロットに患者の予約が割り当てられます。データベースに患者名like(abc)、開始時刻like(8:00 AM 0)、終了時刻like(8:00 AM 30)を挿入する必要があります。jqueryでこれらの3つの値を取得するにはどうすればよいですか?
3 に答える
私の意見では、タイムテーブルの見栄えを良くし、さまざまなブラウザで優れたユーザーエクスペリエンスを提供するために多くの作業があります。たぶん、jQueryフルカレンダー(http://arshaw.com/fullcalendar/)を使用して、ニーズに合わせてカスタマイズすることができます。
これは、1日にタイムイベントを作成するためのデモです。
http://arshaw.com/js/fullcalendar-1.5.3/demos/selectable.html
新しいHTML5 time
要素 ( documentation ) を使用します。次に、 jQueryを使用して時間を取得するのは簡単です。
最初に選択されたセルと最後に選択されたセルを取得する方法の完全な例を次に示します。ユーザーが更新ボタンをクリックした後に選択を行います。
<!doctype html>
<html>
<head>
<script
src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js">
</script>
<script
src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js">
</script>
<script>
$(function () {
var start = $("td.csstdhighlight:first > time").attr("datetime");
var end = $("td.csstdhighlight:last > time").attr("datetime");
});
</script>
</head>
<body>
<table border="1">
<tr><td class="csstdhighlight">
<time datetime="2000-01-01 08:00:00">00</time>
</td></tr>
<tr><td class="csstdhighlight">
<time datetime="2000-01-01 08:15:00">15</time>
</td></tr>
<tr><td class="csstdhighlight">
<time datetime="2000-01-01 08:30:00">30</time>
</td></tr>
<tr><td><time datetime="2000-01-01 08:45:00">45</time></td></tr>
</table>
</body>
</html>
time
Internet Explorer 8 以下をサポートする場合は、IE が新しい HTML5要素を想定どおりに処理するようにする必要があることに注意してください。最も簡単なオプションは、上記のサンプルのようにModernizr ライブラリを含めることです。詳細が必要な場合は、ブログ投稿 How to get HTML5 working in IE and Firefox 2 を参照してください。
クラスを時間セルや一部のデータ属性に追加するなど、html に若干の変更を加えることで、クラスをjQuery.data()
利用してセルの検索を簡素化できます。
<td class="csstablelisttd time" data-hour="9" data-minute="45"> 45 </td>
「スロット」が予約されたら、予約済みであることを示すクラスを追加します。患者の名前を時間セルにデータとして保存すると、次のようなことができます。
$('button').click(function() {
var msg = 'No Bookings',
$booked = $('.booked');
if ($booked.length) {
msg = [];
$booked.each(function() {
var data = $(this).data()
msg.push(data.hour + ':' + data.minute + ' - ' + data.patient)
})
msg = msg.join('\n');
}
alert(msg)
})
これは非常に単純化されていますが、時間セルでクリック イベントを使用する実際のバージョンです。あなたのマウス選択方法は機能していないようで、クリックの方がユーザーフレンドリーです。これでアプリ全体が完成するわけではありませんが、今後のアイデアが得られるはずです