如何使用javascript总结表格列

Question

How to sum up the time taken column and display inside total time cell?如何总结所用时间列并显示在总时间单元格内？

Example: If the user select the option from drop down list it will create a table row with start and end time along with time difference.示例：如果用户从下拉列表中选择该选项，它将创建一个表行，其中包含开始和结束时间以及时差。 Everything is working fine I need to add additional one more script.一切正常，我需要再添加一个脚本。 The total time should display at the bottom and it has to loop.总时间应显示在底部，它必须循环。

 var myTime = new Date().toLocaleString(navigator.language, {hour: '2-digit', minute: '2-digit', second: '2-digit'}); function getValue(data) { var selectedText = $("#ddselect").find("option:selected").text(); if(selectedText!="None"){ var display = document.getElementById("display"); var newRow = display.insertRow(display.rows.length); var cell1 = newRow.insertCell(0); cell1.innerHTML = myTime; var cell2 = newRow.insertCell(1); cell2.innerHTML = selectedText; /* stop time */ var stopTime = new Date().toLocaleString(navigator.language, {hour: '2-digit', minute: '2-digit', second: '2-digit'}); var cell3 = newRow.insertCell(2); cell3.innerHTML = stopTime; var timeDifference = timediff(myTime,stopTime); var cell4 = newRow.insertCell(3); //cell4.innerHTML = new Date(stopTime.getTime() - myTime.getTime()); cell4.innerHTML = timeDifference; } } function timeobject(t){ a = t.replace('AM','').replace('PM','').split(':'); h = parseInt(a[0]); m = parseInt(a[1]); s = parseInt(a[2]); ampm = (t.indexOf('AM') !== -1 ) ? 'AM' : 'PM'; return {hour:h,minute:m,seconds:s,ampm:ampm}; } function timediff(start,end){ start = timeobject(start); end = timeobject(end); end.hour = (end.ampm === 'PM' && start.ampm !== 'PM' && end.hour < 12) ? end.hour + 12 : end.hour; hourDiff = Math.abs(end.hour-start.hour); minuteDiff = end.minute - start.minute; secondDiff = end.seconds - start.seconds; if(minuteDiff < 0){ minuteDiff = Math.abs(60 + minuteDiff); hourDiff = hourDiff - 1; } if(secondDiff < 0){ secondDiff = Math.abs(60 + secondDiff); minuteDiff = minuteDiff - 1; } var totDiff = hourDiff+'hr '+ Math.abs(minuteDiff)+"min " + Math.abs(secondDiff) +"sec"; return totDiff; }

 <!DOCTYPE html> <html> <body> <select id="ddselect" onchange="getValue()"> <option value="">None</option> <option value="1">Initial</option> <option value="2">Revision</option> <option value="3">Final</option> </select> <table id="display" border="1"> <tr> <th>Start Time</th> <th>Activity</th> <th>Stop Time</th> <th>Time Taken</th> </tr> <table border="1"> <th>Total Time:</th> <th> </th> </tr> </table> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> </body> </html>

Answer 1

I found the solution :)我找到了解决方案:)

 var myTime = new Date().toLocaleString(navigator.language, { hour: '2-digit', minute: '2-digit', second: '2-digit' }); function getValue(data) { var selectedText = $("#ddselect").find("option:selected").text(); if (selectedText != "None") { var display = document.getElementById("display"); var newRow = display.insertRow(display.rows.length); var cell1 = newRow.insertCell(0); cell1.innerHTML = myTime; var cell2 = newRow.insertCell(1); cell2.innerHTML = selectedText; /* stop time */ var stopTime = new Date().toLocaleString(navigator.language, { hour: '2-digit', minute: '2-digit', second: '2-digit' }); var cell3 = newRow.insertCell(2); cell3.innerHTML = stopTime; var timeDifference = timediff(myTime, stopTime); var cell4 = newRow.insertCell(3); //cell4.innerHTML = new Date(stopTime.getTime() - myTime.getTime()); cell4.innerHTML = timeDifference; } } var timeArray = []; function timeobject(t) { a = t.replace('AM', '').replace('PM', '').split(':'); h = parseInt(a[0]); m = parseInt(a[1]); s = parseInt(a[2]); ampm = (t.indexOf('AM') !== -1) ? 'AM' : 'PM'; return { hour: h, minute: m, seconds: s, ampm: ampm }; } function timediff(start, end) { start = timeobject(start); end = timeobject(end); end.hour = (end.ampm === 'PM' && start.ampm !== 'PM' && end.hour < 12) ? end.hour + 12 : end.hour; hourDiff = Math.abs(end.hour - start.hour); minuteDiff = end.minute - start.minute; secondDiff = end.seconds - start.seconds; if (minuteDiff < 0) { minuteDiff = Math.abs(60 + minuteDiff); hourDiff = hourDiff - 1; } if (secondDiff < 0) { secondDiff = Math.abs(60 + secondDiff); minuteDiff = minuteDiff - 1; } var timeTaken = hourDiff + ':' + Math.abs(minuteDiff) + ":" + Math.abs(secondDiff); var totDiff = hourDiff + 'hr ' + Math.abs(minuteDiff) + "min " + Math.abs(secondDiff) + "sec"; timeArray.push(timeTaken); console.log(addTime(timeArray)); return totDiff; } function addTime(arr) { var pad = function(num) { return ("0" + num).slice(-2); } var totalTime = []; var totalSeconds = 0; for (var i = 0; i < arr.length; i++) { totalTime = arr[i].split(":"); var hrs = parseInt(totalTime[0], 10); var min = parseInt(totalTime[1], 10); var sec = parseInt(totalTime[2], 10); var currDurationSec = sec + (60 * min) + (60 * 60 * hrs); totalSeconds += currDurationSec; } var hours = Math.floor(totalSeconds / 3600); totalSeconds %= 3600; var minutes = Math.floor(totalSeconds / 60); var seconds = totalSeconds % 60; var sumTime = pad(hours) + ":" + pad(minutes) + ":" + pad(seconds); document.getElementById('sumoftime').innerHTML = sumTime; }

 <!DOCTYPE html> <html> <body> <select id="ddselect" onchange="getValue()"> <option value="">None</option> <option value="1">Initial</option> <option value="2">Revision</option> <option value="3">Final</option> </select> <table id="display" border="1"> <tr> <th>Start Time</th> <th>Activity</th> <th>Stop Time</th> <th>Time Taken</th> </tr> <table border="1"> <th>Total Time:</th> <th id="sumoftime"> </th> </tr> </table> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script> </script> </body> </html>

如何使用javascript总结表格列

问题描述

1 个解决方案

解决方案1
0 2019-12-13 12:27:02

如何使用javascript总结表格列

问题描述

1 个解决方案

解决方案1 0 2019-12-13 12:27:02

解决方案1
0 2019-12-13 12:27:02