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> <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) }
Comments
Post a Comment