[英]how to create a realtime countdown effect to the time left between a start and end time inside a table?
[英]How to create dynamic table based on start and end time values?
我有一個關於根據從一頁到另一頁的傳遞值創建動態表的問題。 在第一頁上,我定義開始時間,結束時間和增量間隔。 因此,在我選擇開始時間之后,假設是8:00 am,然后選擇15分鍾的會議時間,結束時間將基於開始時間以15分鍾為間隔進行創建。 結束時間示例:8:15 am,8:30am,8:45am,...依此類推,直到我的最后一個值不能大於9:00 pm。 我可以選擇任何這些值作為結束時間。 在我選擇了這三個值的開始,結束和會議長度之后,我點擊了提交,將我帶到第二頁。 在此頁面上,我想基於傳遞的值創建表。 這是我到目前為止的代碼:
<form name="myForm" id="myForm" method="post" action="SeconfPage.cfm">
<fieldset>
<table>
<tr>
<th>Date</th>
<td><input type="date" id="datepicker" name="datepicker"/></td>
</tr>
<tr>
<th>Start Time</th>
<td><input type="text" id="stime" name="stime"/></td>
</tr>
<tr>
<th>Length of meeting</th>
<td>
<select name="meeting" id="meeting">
<option value="">--Select length--</option>
</select>
</td>
</tr>
<tr>
<th>End Time</th>
<td><input type="text" id="etime" name="etime"></td>
</tr>
<tr>
<td><input type="button" value="Create" onClick="getTable()"></td>
</tr>
</table>
</fieldset>
</form>
$(function() {
for (var i = 5; i <= 60; i += 5) {
$('#meeting').append('<option value="' + i + '">' + i + ' min' + '</option>');
}
function setEndTime() {
var meetingLength = parseInt($('#meeting').find('option:selected').val() || 0);
var selectedTime = $('#stime').timepicker('getTime');
if(selectedTime == null || selectedTime == ""){
alert("Please select the start time");
}else{
selectedTime.setMinutes(selectedTime.getMinutes() + parseInt(meetingLength, 10), 0);
$('#etime').timepicker('option', 'minTime', selectedTime);
$('#etime').timepicker('setTime', selectedTime);
}
}
$('#stime').timepicker({
'timeFormat':'h:i a',
'minTime': '8:00 AM',
'maxTime': '9:00 PM',
'step': 30
}).on('changeTime', function () {
setEndTime();
});
var count = 0;
$('#etime').timepicker({
'timeFormat':'h:i a' + ' (Slot '+count+')',
'minTime': '8:00 AM',
'maxTime': '9:00 PM',
'step': function () {
var val = parseInt($('#meeting').find('option:selected').val());
count++
return val;
},
});
$('#meeting').bind('change', function () {
setEndTime();
});
});
function getTable(){
document.myForm.submit();
}
我正在嘗試弄清楚在第二頁上創建表的最佳方式和方法。 所有值都是從我的表單傳遞的。 例如,我在第二頁上有:
start time: 8:00am
end time: 5:00pm
meeting length: 20min
我的想法是創建一個如下的for循環:
for(var i=stime; i<=etime; i+=meeting){
var tbl = "<tr><td>"+stime+"-"+i+"</td></tr>"
}
這樣的事情會給我開始時間和基於增量的下一個值。 創建表后,將表存儲在MySQL數據庫中的最佳方法是什么? 我仍然不知道如何使它工作。 如果有人可以給我提示,最好的方法是什么,如果我走對了道路。
提前致謝。
這是您要找的東西嗎,它是一個使用其他表數據創建並填充的表
https://github.com/TheOriginalDeveloper/Dynamic-and-response-table
我將做出一些假設...這些會議槽中將發生某些事情,並且會議通常在某個時間和某個日期進行(因此,這只是數據庫表中的單個日期時間)。
同意Leigh,您要執行的操作將決定數據結構,然后使用對該查詢的查詢來構建數據顯示(在這種情況下為表格)。 因此,如果您最終需要存儲的數據是
dateTimeStamp ¦ meetingID ¦ meetingSlotData
{ts '2015-07-04 20:00:00'} ¦ 1 ¦ Peter Pan
{ts '2015-07-04 20:15:00'} ¦ 1 ¦ Wendy
首先使用日期時間選擇器填充數據表(暫時暫時手動執行)
<cfset newQuery = queryNew("dateTimeStamp, meetingID, meetingSlotData","Timestamp, Integer, VarChar")>
<cfset queryAddRow(newQuery, 2)>
<cfset querySetCell(newQuery, "dateTimeStamp", {ts '2015-07-04 20:00:00'}, 1)>
<cfset querySetCell(newQuery, "meetingID", 1, 1)>
<cfset querySetCell(newQuery, "dateTimeStamp", {ts '2015-07-04 20:10:00'}, 2)>
<cfset querySetCell(newQuery, "meetingID", 1, 2)>
<cfdump var="#newQuery#">
然后查詢數據以構建表
<cfquery name="getMeeting">
SELECT *
FROM meetings
WHERE id = 1
</cfquery>
<table>
<cfoutput query = "getMeeting">
<tr><td>#dateTimeStamp#</td><td>#meetingID#</td></tr>
</cfoutput>
</table>
請嘗試以下操作(用於在第二頁上創建表格):
<cfscript>
//existence and type checking
param name="FORM.datepicker" type="date";
param name="FORM.sTime" type="time";
param name="FORM.eTime" type="time";
param name="FORM.meeting" type="range" min=5 max=60;//minutes
//create currentTimeSlotBegin and lastTimeSlotBegin for cfloop
currentTimeSlotBegin = createDateTime(year(FORM.datepicker), month(FORM.datepicker), day(FORM.datepicker), hour(FORM.sTime), minute(FORM.sTime), 0);//this will be incremented, within cfloop, for each time slot
lastTimeSlotEnd = createDateTime(year(FORM.datepicker), month(FORM.datepicker), day(FORM.datepicker), hour(FORM.eTime), minute(FORM.eTime), 0);//used only for creating lastTimeSlotBegin below
lastTimeSlotBegin = dateAdd("n", FORM.meeting*-1, lastTimeSlotEnd);//subtract meeting length to get beginning of last time slot
</cfscript>
<table>
<tr>
<th>Time Slots for <cfoutput>#dateFormat(FORM.datepicker, "ddd, mmm dd, yyyy")#</cfoutput></th>
</tr>
<cfloop condition="currentTimeSlotBegin lte lastTimeSlotBegin">
<cfset currentTimeSlotEnd = dateAdd("n", FORM.meeting, currentTimeSlotBegin)>
<tr>
<td><cfoutput>#timeFormat(currentTimeSlotBegin, "hh:nn tt")#-#timeFormat(currentTimeSlotEnd, "hh:nn tt")#</cfoutput></td>
</tr>
<cfset currentTimeSlotBegin = dateAdd("n", FORM.meeting, currentTimeSlotBegin)>
</cfloop>
</table>
謝謝!,
-亞倫
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.