Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder MaDmiX's Avatar
    Join Date
    Feb 2012
    Location
    Charlotte, NC
    Posts
    162
    Thanks
    41
    Thanked 0 Times in 0 Posts

    Calling a function from a table cell

    Hi All,

    I wrote a simple function to calculate the difference between two times within a 24 hour period.

    Code:
    function calculateTime(time1,time2) {
    	var hours1 = parseInt(time1.slice(0,2),10);
    	var mins1 = parseInt(time1.slice(3,5),10);
    	var secs1 = parseInt(time1.slice(6,8),10);
    
    	var hours2 = parseInt(time2.slice(0,2),10);
    	var mins2 = parseInt(time2.slice(3,5),10);
    	var secs2 = parseInt(time2.slice(6,8),10);
    
    	if (hours1>hours2) {
    		hours2=hours2+24;
    	}	
    
    	var startTime = (hours1 * 3600) + (mins1 * 60) + (secs1);
    	var endTime = (hours2 * 3600) + (mins2 * 60) + (secs2);
    	var totalSecs = endTime-startTime;
    
    	var sumHours = parseInt(totalSecs / 3600, 10);
    	var sumMins = parseInt((totalSecs - sumHours * 3600) / 60, 10);
    	var sumSecs = totalSecs - sumHours * 3600 - sumMins * 60;
    
    	var i;
    	var sumTime = Array();
    	sumTime[0] = sumHours;
    	sumTime[1] = sumMins;
    	sumTime[2] = sumSecs;
    
    	for (i=0;i<sumTime.length;i++) {
    		if(sumTime[i] < 10) {
    			sumTime[i] = "0" + sumTime[i];
    		}
    	}
    	return sumTime.join(':');
    }
    This works great but I can't figure out how to call the function. I want to create a table where users will enter their start and end times into text boxes in a <tr> and have the result displayed in a cell on the same row.

    Any ideas? This one seems simple but I seem to be at a loss. I thought about using window.onLoad but not sure that's the best (if even possible) approach.

    Thanks in advance for you guidance here.

    Kind regards,

    Ken

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,876
    Thanks
    56
    Thanked 536 Times in 533 Posts
    the problem with text boxes is that they have an onchange event, but it is called when the text box loses focus, which is kind of counter-intuitive to some users. I would suggest having a "calculate time" button in the same row that the users clicks once both boxes are filled out. From there it is a simple matter of finding the two textboxes in the DOM, grabbing their values and feeding them to your function.

    For example, if your table looked like this:
    Code:
    <table border="1">
      <tr>
        <td><input type="text" </td>
        <td><input type="text" </td>
        <td><input type="button" value="get time" onclick="getTimes(this)"/></td>
        <td width="200px"></td>
      </tr>
      <tr>
        <td><input type="text" </td>
        <td><input type="text" </td>
        <td><input type="button" value="get time" onclick="getTimes(this)"/></td>
        <td width="200px"></td>
      </tr>
    </table>
    then you could use a function like this:

    Code:
    function getTimes(btn){
    var start=btn.parentNode.parentNode.cells[0].children[0].value;
    var end=btn.parentNode.parentNode.cells[1].children[0].value;
    btn.parentNode.parentNode.cells[3].innerHTML=calculateTime(start,end);
    }
    Last edited by xelawho; 09-20-2012 at 05:50 PM. Reason: added example

  • #3
    Regular Coder MaDmiX's Avatar
    Join Date
    Feb 2012
    Location
    Charlotte, NC
    Posts
    162
    Thanks
    41
    Thanked 0 Times in 0 Posts
    Hi xelawho,

    Thanks for your reply. Unfortunately I don't have the luxury of a button. Actually I was just informed that I have to set up a "confirmation" page that will display the start and end times entered from a form on another page, so this just became a little more complicated.

    I can echo the entered values to my table cells using PHP but I am still unsure how I will get the result:

    Code:
    <table>
    <tr>
    <th>Start time:</th>
    <th>End time:</th>
    <th>Total time:</th>
    </tr>
    <tr>
    <td><?php echo $row_rstAffectedProg['StartTime']; ?></td>
    <td><?php echo $row_rstAffectedProg['EndTime']; ?></td>
    <td> NOT SURE WHAT TO DO HERE :( </TD>
    </tr>
    </table>
    Thanks,

    Ken

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,876
    Thanks
    56
    Thanked 536 Times in 533 Posts
    hmm. I think the last event you can listen for is the window.onload, and if you are lucky this happens after the php has been echoed in. I really don't know about the order of things there.

    If it is true and you can give your table an id of "tab" you could try this:

    Code:
    window.onload=function (){
    var rows=document.getElementById("tab").getElementsByTagName("tr");
    for (var x = 1; x < rows.length; x++) { //start at 1 to skip the header cells
    var start=rows[x].cells[0].children[0].value;
    var end=rows[x].cells[1].children[0].value;
    rows[x].cells[2].innerHTML=calculateTime(start,end);
    	}
    }
    </script>
    but are you sure that the start and end times will be displayed in text boxes? because if they just get displayed as text you would have to do:
    Code:
    var start=rows[x].cells[0].innerHTML;
    var end=rows[x].cells[1].innerHTML;
    give it a go, anyway...

  • Users who have thanked xelawho for this post:

    MaDmiX (09-20-2012)

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,876
    Thanks
    56
    Thanked 536 Times in 533 Posts
    but (again flaunting my ignorance of php) if these figures are coming from the server, can't you do the calculations server side and just echo in all the results?

  • #6
    Regular Coder MaDmiX's Avatar
    Join Date
    Feb 2012
    Location
    Charlotte, NC
    Posts
    162
    Thanks
    41
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    but (again flaunting my ignorance of php) if these figures are coming from the server, can't you do the calculations server side and just echo in all the results?
    I am more comfortable with javascript and I like the idea that the calculations will be performed client side. BTW your function worked nicely. Big thanks :-)

    Ken

  • #7
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,876
    Thanks
    56
    Thanked 536 Times in 533 Posts
    you're welcome. In future, you might consider using js's date object to make time calculations:

    Code:
    function calculateTime(time1,time2) {
    var startDate = new Date(2000, 0, 1, time1.split(":")[0], time1.split(":")[1], time1.split(":")[2]);
    var endDate = new Date(2000, 0, 1, time2.split(":")[0], time2.split(":")[1], time2.split(":")[2]);
    
    var milliSecs = endDate-startDate;
    var msSecs = 1000;
    var msMins = (msSecs * 60)
    var msHours = (msMins * 60)
    var numHours = Math.floor(milliSecs/msHours)
    var numMins = Math.floor((milliSecs - (numHours * msHours)) / msMins)
    var numSecs = Math.floor((milliSecs - (numHours * msHours) - (numMins * msMins))/ msSecs)
    
    numSecs =(numSecs < 10)?"0" + numSecs:numSecs;
    numMins =(numMins < 10)?"0" + numMins:numMins;
    
    return numHours + ":" + numMins + ":" + numSecs; 
    }
    or if you wanted to be really lazy...

    Code:
    function calculateTime(time1,time2) {
    var startDate = new Date(2000, 0, 1, time1.split(":")[0], time1.split(":")[1], time1.split(":")[2]);
    var endDate = new Date(2000, 0, 1, time2.split(":")[0], time2.split(":")[1], time2.split(":")[2]);
    
    var milliSecs = endDate-startDate;
    d=new Date(2000,0,1,0,0,0);
    d.setMilliseconds(d.getMilliseconds()+milliSecs);
    
    return d.toTimeString().slice(0,8); 
    }
    Last edited by xelawho; 09-20-2012 at 08:28 PM.

  • #8
    Regular Coder MaDmiX's Avatar
    Join Date
    Feb 2012
    Location
    Charlotte, NC
    Posts
    162
    Thanks
    41
    Thanked 0 Times in 0 Posts
    Cool. I did not know about that function. I am learning so much but there is still sooo much I don't yet know.

    Best regards,

    Ken


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •