Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
  <p>Dynamic table</p>
  <table id="tableAppointment" cellspacing="1" width="50%" bgcolor="#f0f0f0" align="center">
        <thead>
            <tr>
                <td width="70px" >
                  <b>Hour</b>
                </td>
                <td class="csstablelisttd">
                    <b>Minute</b>
                </td>
                <td class="csstablelisttd">
                    <b>Name</b>
                </td>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
  <p>Hardcode table</p>
  <table id="tableOutput" cellspacing="1" width="50%" bgcolor="#cccccc" align="center">
        <thead>
            <tr>
                <td width="70px" ><b>Hour</b>
                </td>
                <td class="csstablelisttd">
                    <b>Minute</b>
                </td>
                <td class="csstablelisttd">
                    <b>Name</b>
                </td>
            </tr>
        </thead>
        <tbody>
          <tr>
                <td class="csstablelisttd" valign="top" width="70px">
                    8:00AM
                </td>
                <td class="csstablelisttd">
                    0
                </td>
                <td class="csstablelisttd">
                    <span></span>
                </td>
            </tr>
            <tr>
                <td class="csstablelisttd">
                </td>
                <td class="csstablelisttd">
                    15
                </td>
                <td class="csstablelisttd">
                    <span></span>
                </td>
            </tr>
            <tr>
                <td class="csstablelisttd">
                </td>
                <td class="csstablelisttd">
                    30
                </td>
                <td class="csstablelisttd">
                    <span></span>
                </td>
            </tr>
            <tr>
                <td class="csstablelisttd">
                </td>
                <td class="csstablelisttd">
                    45
                </td>
                <td class="csstablelisttd">
                    <span></span>
                </td>
            </tr>
            <tr>
                <td class="csstablelisttd" valign="top" width="90px">
                    9:00AM
                </td>
                <td class="csstablelisttd">
                    0
                </td>
                <td class="csstablelisttd">
                    <span></span>
                </td>
            </tr>
            <tr>
                <td class="csstablelisttd">
                </td>
                <td class="csstablelisttd">
                    15
                </td>
                <td class="csstablelisttd">
                    <span></span>
                </td>
            </tr>
            <tr>
                <td class="csstablelisttd">
                </td>
                <td class="csstablelisttd">
                    30
                </td>
                <td class="csstablelisttd">
                    <span></span>
                </td>
            </tr>
            <tr>
                <td class="csstablelisttd">
                </td>
                <td class="csstablelisttd">
                    45
                </td>
                <td class="csstablelisttd">
                    <span></span>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>
 
var is = false;
        var tableAppointment;
        var rowCount;
        var row;
        var cell1;
        var cell2;
        var cell3;
        var constMinutes = 0;
        var startTime = "08:00 AM"; //Time Must be in Format "08:00 AM"
        var endTime = "11:00 PM";
        var startTimeAMPM;
        var startTimeHour;
        var startTimeMinute;
        var endTimeAMPM;
        var endTimeHour;
        var endTimeMinute;
        var hour;
        var calculateWorkingHours;
        var timeSlot;
​
        window.onload = body_load;
        function body_load()
        {
            tableAppointment = document.getElementById('tableAppointment');
            createTable(tableAppointment);
        }
        function createTable(tableAppointment)
        {
            startTimeAMPM = startTime.substring(6, 8);
            startTimeHour = startTime.substring(0, 2);
            startTimeMinute = startTime.substring(4, 5);
            endTimeAMPM = endTime.substring(6, 8);
            endTimeHour = endTime.substring(0, 2);
            endTimeMinute = endTime.substring(4, 5);
            cellAMPM = 0;
            AMPM = ["AM","PM"];
​
            if (endTimeAMPM == "PM")
            {
                hour = clock24Hour(endTimeHour);
                calculateWorkingHours = parseFloat(hour) - parseFloat(startTimeHour);
                timeSlot = calculateWorkingHours * 4;
            }
            else if (startTimeAMPM == "AM")
            {
                calculateWorkingHours = parseFloat(endTimeHour) - parseFloat(startTimeHour);
                timeSlot = calculateWorkingHours * 4;
            }
​
            for (var i = 1; i < parseFloat(timeSlot); i++)
            {
                row = tableAppointment.insertRow(i);
                cell1 = row.insertCell(0);
                cell1.className += 'csstablelisttd';
                cell2 = row.insertCell(1);
                cell2.className += 'csstablelisttd';
                cell3 = row.insertCell(2);
                cell3.className += 'csstablelisttd';
              
              
                if (constMinutes === 0) {
                  
                  if (startTimeHour === 12) cellAMPM++;
                  cell1.innerHTML= startTimeHour + ":00" + AMPM[cellAMPM%2];
                  
                  startTimeHour = Number(startTimeHour) % 12 + 1;
                  
                }   
              
                cell2.innerHTML = parseFloat(constMinutes);
                constMinutes = parseFloat(constMinutes + 15);
                if (constMinutes == "60")
                {
                    constMinutes = 0;
                }
            }
        }
        function clock24Hour(endTimeHour)
        {
            switch (endTimeHour)
            {
                case "01":
                    return "13";
                    
                case "02":
                    return "14";
                    
                case "03":
                    return "15";
                    
                case "04":
                    return "16";
                    
                case "05":
                    return "17";
                    
                case "06":
                    return "18";
                    
                case "07":
                    return "19";
                    
                case "08":
                    return "20";
                    
                case "09":
                    return "21";
                    
                case "10":
                    return "22";
                
                case "11":
                    return "23";
                    
                case "12":
                    return "24";
                    
            }
        }
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers