01.<script src="function/DataTables/jQuery-3.3.1/jquery-3.3.1.min.js"></script>
02. <script type="text/javascript">
03. $(document).ready(function(){
04. $(".txtNumberA,.txtNumberB").keyup(function(){
05.
06. if(isNaN($(".txtNumberA").val()))
07. {
08. alert('Please input Number A is number');
09. $(".txtNumberA").val('');
10. }
11.
12. if(isNaN($(".txtNumberB").val()))
13. {
14. alert('Please input Number B is number');
15. $(".txtNumberB").val('');
16. }
17.
18. $(".txtNumberC").val(parseFloat($(".txtNumberA").val())+parseFloat($(".txtNumberB").val()));
19. });
20. var rows = 1;
21. $("#createRows").click(function(){
22. var tr = "<div class='control-group input-group' style='margin-top:10px;margin-bottom:20px;margin-right:10px; border: 2px dashed red; border-radius: 8px; padding: 10px;'>";
23.
24. tr = tr + "<label class='col-sm-2 control-label'>วันที่ลา</label>";
25. tr = tr + "<div class='col-sm-10'>";
26. tr = tr + "<input type='date' name='txtdate"+rows+"' id='txtdate"+rows+"' class='form-control'>";
27. tr = tr + "</div>";
28.
29. tr = tr + "<label class='col-sm-2 control-label'>ช่วงเวลา</label>";
30. tr = tr + "<div class='col-sm-10'>";
31. tr = tr + "<div class='input-group'>";
32. tr = tr + "<input type='text' class='input-small form-control txtNumberA' name='timestart"+rows+"' id='timestart"+rows+"'> <span class='input-group-addon'> ถึง </span>";
33. tr = tr + "<input type='text' class='input-small form-control txtNumberB' name='timeend"+rows+"' id='timeend"+rows+"' >";
34. tr = tr + "</div>";
35. tr = tr + "</div>";
36.
37. tr = tr + "<label class='col-sm-2 col-form-label'></label>";
38. tr = tr + "<div class='col-sm-10'>";
39. tr = tr + "<font color='red'> หมายเหตุ รูปแบบวันที่เป็นแบบ 24 ชม. ครึ่งชั่วโมงจาก .30 ใส่เป็น .50 </font> ";
40. tr = tr + "</div>";
41.
42.
43. tr = tr + "<label class='col-sm-2 control-label'>จำนวนชั่วโมง</label>";
44. tr = tr + "<div class='col-sm-10'>";
45. tr = tr + "<input type='text' class='form-control txtNumberC' name='txtHour' required='required' readonly>";
46. tr = tr + "</div>";
47.
48.
49. tr = tr + "<div class='input-group-btn'>";
50. tr = tr + "<button class='btn btn-danger remove' type='button' id='deleteRows'><i class='glyphicon glyphicon-remove'></i> ลบ</button>";
51. tr = tr + "</div>";
52. tr = tr + "</div>";
53.
54. $('#myTbl22 > tbody:last').append(tr);
55.
56. $('#hdnCount').val(rows);
57. rows = rows + 1;
58.
59. });
60.
61.
62. $("body").on("click",".remove",function(){
63. $(this).parents(".control-group").remove();
64. });
65. });
66. </script>
