javascript - Issue with iterating HTML Table (for working hours) with JQuery -


i have table in html user puts in start time , end time calculates hours in total. if hours in total ranges between 0-4, "standby hours" text field display value of 0.5, if "hours in total" ranges between 4-8, "standby hours" display 1 , finally, if "hours in total" ranges between 8-12, "standby hours" display 1.5.

now, works perfectly.

from here, have found solution generates more tables user input more "start time" , "end time". problem calculations work first table , not other generated ones.

also, know how add standby hours have been generated since beginning , spit answer in text field "total standby hours".

here html code:

<h1> time format in 24h </h1>  <div id="table"> <table id="timetable" class="tg">   <tr>     <th class="tg-yw41"></th>     <th class="tg-yw4l">start time</th>     <th class="tg-yw4l">end time</th>     <th class="tg-yw4l">hours in total</th>     <th class="tg-yw4l">standby hours</th>   </tr>   <tr>   <td class="tg-yw4l">1</td>     <td class="tg-yw4l"><input class="time1" value="" placeholder="enter start time"/></td>     <td class="tg-yw4l"><input class="time2" value="" placeholder="enter end time"/></td>     <td class="tg-yw4l"><input type="text" class="hours" value="0" readonly=""/></td>     <td class="tg-yw4l"><input type="text" class="standby" value="0" readonly=""/></td>   </tr> </table> </div>  <!-- //example of has generated <table class="tg">   <tr>     <th class="tg-yw41"></th>     <th class="tg-yw4l">start time</th>     <th class="tg-yw4l">end time</th>     <th class="tg-yw4l">hours in total</th>     <th class="tg-yw4l">standby hours</th>   </tr>   <tr>   <td class="tg-yw4l">2</td>     <td class="tg-ywl"><input class="time1" value="" placeholder="enter start time"/></td>     <td class="tg-yw4l"><input class="time2" value="" placeholder="enter end time"/></td>     <td class="tg-yw4l"><input type="text" class="hours" value="0" readonly=""/></td>     <td class="tg-yw4l"><input type="text" class="standby" value="0" readonly=""/></td>   </tr> </table> --> <caption>total standby hours</caption>&nbsp;<input class="grandtotal" value=""/> <br> <button onclick="addtime();">add time</button><br> <button>remove time</button>

and here jquery code:

var numrows = 2, ti = 5;  var tablecount = 1;   $(function () {      function calculate() {          var hours = parseint($(".time2").val().split(':')[0], 10) - parseint($(".time1").val().split(':')[0], 10);          if(hours < 0)             hours = 24 + hours;           $(".hours").val(hours);           if (hours>=4)             $(".standby").val("1");           if (hours<=4)             $(".standby").val("0.5");           //if (hours==4 && hours<8) $(".standby").val("1");           if (hours>=8 && hours<=12)             $(".standby").val("1.5");           if (hours>12)             $(".standby").val("1.5");      }       $(".time1,.time2").change(calculate);      calculate();  });  window.addtime = function () {     tablecount++;     $('#timetable').clone().attr('id', "timetable" + tablecount).appendto('#table');    $('#timetable' + tablecount).find("input").val("");  };   var standby1 = $(this).find('input.standby').val();  var standby2 = $(this).find('input.standby').val();    /*var standbytotal = (standby); //calculate total of standby hours appear   $(this).find('input.grandtotal').val(standbytotal ? standbytotal : "");*/

there jsfiddle of work: http://jsfiddle.net/44nck/514/

thank in advance help!

for sum of standby can $(".standby") loop through , add it.

window.standby = function() {   var sum = 0;   $(".standby").each(function(index, stand) {     sum += parsefloat($(stand).val());   })    $(".grandtotal").val(sum) }

updated fiddle


Comments

Post a Comment

Popular posts from this blog

Is there a better way to structure post methods in Class Based Views -

i'm using class based views in django , never specify url in ajax calls , omit action parameter in form because know these requests go through post method of class based view. notice view - profile page make many requests depending on user updating on page - post method become convoluted , if/else mess example: def post(self, request, *args, **kwargs): # handle user changing available date if request.post.get('availabledate') != none: self.updateavailabledate(request) return jsonresponse({'result':'success'}) if request.post.get('newprojectname') != none: creative_user = creativeuserprofile.objects.get(id = request.user.id) project = project.create_project(creative_user, request.post['newprojectname']) project.save() return jsonresponse({'projectid': project.id }) if request.post.get('projectimage') != none , request.files['file']: proj
Read more

performance - Why is XCHG reg, reg a 3 micro-op instruction on modern Intel architectures? -

i'm doing micro-optimization on performance critical part of code , came across sequence of instructions (in at&t syntax): add %rax, %rbx mov %rdx, %rax mov %rbx, %rdx i thought had use case xchg allow me shave instruction , write: add %rbx, %rax xchg %rax, %rdx however, dimay found agner fog's instruction tables , xchg 3 micro-op instruction 2 cycle latency on sandy bridge, ivy bridge, broadwell, haswell , skylake. 3 whole micro-ops , 2 cycles of latency! 3 micro-ops throws off 4-1-1-1 cadence , 2 cycle latency makes worse original in best case since last 2 instructions in original might execute in parallel. now... cpu might breaking instruction micro-ops equivalent to: mov %rax, %tmp mov %rdx, %rax mov %tmp, %rdx where tmp anonymous internal register , suppose last 2 micro-ops run in parallel latency 2 cycles. given register renaming occurs on these micro-architectures, though, doesn't make sense me done way. why wouldn't register renamer
Read more

jquery - Responsive Navbar with Sub Navbar -

good day, forgive me nav vocabulary not best. if question confusing apologize. i'm working on navigation bar needs centered on page @ 768px , above. items in nav open (or perhaps toggle) subnav lives directly below. these nav should appear centered on page. i have been able work through responsive portion of nav bar, having main items align vertically , sub nav menu of each item roll out below, , gave them indent separation. working well. however, issue not responsive side, behavior @ width greater 768px. happens toggling menu's sub navigation pushes other main items down page below sub nav. here's code: $(document).ready(function () { //stick in fixed 100% height behind navbar don't wrap $('#slide-nav.navbar-inverse').after($('<div class="inverse" id="navbar-height-col"></div>')); $('#slide-nav.navbar-default').after($('<div id="navbar-height-col"></d
Read more