如何根据开始和结束时间值创建动态 table？

Question

我有一个关于根据从一个页面传递到另一个页面的值创建动态 table 的问题。在第一页上，我定义了开始时间、结束时间和增量间隔。因此，在我选择开始时间后，假设 8:00am 并选择会议时长 15 分钟，结束时间将根据开始时间以 15 分钟的间隔创建。示例结束时间：8:15am、8:30am、8:45am、...等等，直到我的最后一个值不能大于 9:00pm。我可以为我的结束时间选择这些值中的任何一个。在我选择这三个值开始、结束和会议长度后，我点击提交，将我带到第二页。在此页面上，我想根据传递的值创建我的 table。这是我到目前为止的代码：

<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();
    }

我正在尝试找出在第二页上创建 table 的最佳方式和最佳方式。所有值都从我的表单传递。例如在第二页我有：

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

这样的事情会根据增量给我开始时间和下一个值。另外，一旦创建 table，将此 table 存储在 MySQL 数据库中的最佳方法是什么？我仍然没有弄清楚如何让它工作。如果有人能给我提示什么是最好的方法以及我是否走在正确的道路上。

提前致谢。

Answer 1

这是您要找的东西吗，它是使用另一个 table 数据创建并填充的 table

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

Answer 2

我会做一些假设...在这些会议时段会发生一些事情，并且会议通常在某个日期的和时间（即因此数据库中只有一个日期时间 table).

同意 Leigh 的观点，你想做什么决定了数据结构，然后使用它的查询来构建你的数据显示（table 在这种情况下）。所以如果你最后需要存储的数据是

dateTimeStamp                 ¦ meetingID     ¦  meetingSlotData
{ts '2015-07-04 20:00:00'}    ¦ 1             ¦  Peter Pan
{ts '2015-07-04 20:15:00'}    ¦ 1             ¦  Wendy

首先使用您的日期时间选择器填充数据table（现在只是手动操作）

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

然后查询数据来构建你的table

<cfquery name="getMeeting">
    SELECT *
    FROM meetings
    WHERE id = 1
</cfquery>

<table>
<cfoutput query = "getMeeting">
    <tr><td>#dateTimeStamp#</td><td>#meetingID#</td></tr>
</cfoutput> 
</table>

Answer 3

请尝试以下操作（用于在第 2 页创建 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>

谢谢！,

-亚伦

如何根据开始和结束时间值创建动态 table？

How to create dynamic table based on start and end time values?

javascript

coldfusion

jquery