如何根據開始和結束時間值創建動態表？

Question

我有一個基於傳遞值從一個頁面到另一個創建動態表的問題。在第一頁上，我定義了開始時間，結束時間和增量間隔。所以在我選擇開始時間之後，比如早上8點，選擇會議長度15分鐘，結束時間將根據開始時間以15分鐘爲間隔創建。示例結束時間：早上8點15分，上午8點30分，上午8點45分......等等，直到我的最後一個值不能大於下午9點。我可以在結束時選擇這些值中的任何一個。在我選擇這三個值開始，結束和會議長度後，我點擊提交，將我帶到第二頁。在這個頁面上，我想根據傳遞的值創建我的表。這是我迄今爲止的代碼：

<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數據庫中的最佳方式是什麼？我仍然沒有弄清楚如何讓這個工作。如果任何人都能給我一個提示，那麼最好的方法是什麼，如果我走在正確的道路上。

在此先感謝。

Answer 1

請嘗試以下方法（對於第2頁上創建表）：

<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> 

感謝！

-Aaron

Answer 2

這是有點兒你想找的，它是一個表中創建並使用另一個表中的數據

https://github.com/TheOriginalDeveloper/Dynamic-and-responsive-table

Answer 3

我會作出一些假設......有些事情是要在發生填充這些會議插槽，通常會議上的時間爲和（因此它只是數據庫表中的單個日期時間）。

同意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>