Help with 2 JQuery Functions...

interclubs
interclubs used Ask the Experts™
on
I have a table, and embedded in the table are fields like this:
<div id="timeCard">
 <span data-time="2:30">2:30</span><span data-cost="$55.00">$55.00</span>
 <span data-time="1:45">1:45</span><span data-cost="$25.00">$25.00</span>
 <span data-time=":30">:30</span><span data-cost="10">10</span>
 <span data-time="26:20">26:20</span><span data-cost="$200.00">$200.00</span>
</div>

<div id="TotalTime" data-totaltime=""></div>
<div id="TotalCost" data-totalcost=""></div>

I'm looking for 2 jquery functions:

1) will add up all the data attributes for data-time in the timeCard div. It will then update the TotalTime div, both the data attribute and the div html. All the times are in the format of hours:minutes

2) will add up all the data attributes for data-cost in the timeCard div. It will then update the TotalCost div, both the data attribute and the div html. Notice that the format can change a little bit. Some have a $ sign, and some don't have decimal points.

When it's done, it should look like this:
<div id="TotalTime" data-totaltime="31:05">31:05</div>
<div id="TotalCost" data-totalcost="290.00">290.00</div>
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
		
		<script type="text/javascript">
			jQuery(function($){
				
				function calcTime()
				{
					var totalHours = 0;
					var totalMin = 0;
					
					$('#timeCard').find('> span:nth-child(odd)').each(function(){
					
						var dataTime = $(this).attr('data-time');
						var timeParts = dataTime.split(':');
						
						if (timeParts[0] != '')
							totalHours += parseInt(timeParts[0]);
						if (timeParts[1] != '')
							totalMin += parseInt(timeParts[1]);
						
					});
					
					if (totalMin > 59)
					{
						totalHours += Math.round(totalMin / 60, 0);
						totalMin = totalMin % 60;
					}
					
					var timeString = totalHours.toString() + ':';
					if (totalMin < 10)
						timeString += '0';
					timeString += totalMin.toString();
					
					$('#TotalTime').attr('data-totaltime', timeString).html(timeString);
				}
				calcTime();
				
				function calcCost()
				{
					var totalCost = 0;
					
					$('#timeCard').find('> span:nth-child(even)').each(function(){
					
						var cost = $(this).attr('data-cost');
						if (cost[0] == '$')
							cost = cost.substr(1);
							
						totalCost += parseFloat(cost);
					});
					
					totalCost = Math.round(totalCost*100)/100;
					
					var costStr = totalCost.toString();
					var dotIndex = costStr.indexOf('.');
					if (dotIndex == -1)
						costStr += '.00';
					else if (dotIndex == costStr.length - 2)
						costStr += '0';
					
					$('#TotalCost').attr('data-totalcost', costStr).html(costStr);
				}
				calcCost();
				
			});
		</script>
	</head>
	<body>
		<div id="timeCard">
		 <span data-time="2:30">2:30</span><span data-cost="$55.00">$55.00</span>
		 <span data-time="1:45">1:45</span><span data-cost="$25.00">$25.00</span>
		 <span data-time=":30">:30</span><span data-cost="10">10</span>
		 <span data-time="26:20">26:20</span><span data-cost="$200.00">$200.00</span>
		</div>

		<div id="TotalTime" data-totaltime=""></div>
		<div id="TotalCost" data-totalcost=""></div>
	</body>
</html>

Open in new window

oops, minor error. Math.round only takes one arg:

totalHours += Math.round(totalMin / 60);

Open in new window

Project Lead
Top Expert 2011
Commented:
Very simple and few line of code. Take a look at below code (Tested)
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" language="JavaScript" type="text/javascript"></script> 
    <script type="text/javascript">
   $(document).ready(function(){
      var total_cost = '$' + getTotalcost().toFixed(2);
      $('#TotalCost').text(total_cost);
      $('#TotalCost').attr('data-cost', total_cost);
      
      var total_time = getTotalTime();
      $('#TotalTime').text(total_time);
      $('#TotalTime').attr('data-time', total_time);
   });
   
   function getTotalcost()
   {
     var total_cost = 0.0;
      $('#timeCard span[data-cost]').each(function(){
         total_cost += parseFloat($(this).text().replace(/\$/g,''));
      });
      return total_cost;
   }
   
   function getTotalTime()
   {
     var total_hours =0;var total_mins = 0;
      $('#timeCard span[data-time]').each(function(){
          var current_time = $(this).text().split(':');
          if(current_time[0]!= "")
            total_hours += parseInt(current_time[0]);
          if(current_time[1]!= "")
            total_mins += parseInt(current_time[1]);
      });
     return (total_hours + Math.floor(total_mins/60)) + ':' + (Math.floor(total_mins % 60) < 10 ? '0' : '')  + Math.floor(total_mins % 60)  ;
   }
   
</script>
</head>
<body>
<div id="timeCard">
 <span data-time="2:30">2:30</span><span data-cost="$55.00">$55.00</span>
 <span data-time="1:45">1:45</span><span data-cost="$25.00">$25.00</span>
 <span data-time=":30">:30</span><span data-cost="10">10</span>
 <span data-time="26:20">26:20</span><span data-cost="$200.00">$200.00</span>
</div>

<div id="TotalTime" data-totaltime=""></div>
<div id="TotalCost" data-totalcost=""></div>
</body>
</html>

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial