堆栈内存溢出
  简体   繁体   English

使用 JavaScript 根据表格中选定的月份打印月份的逻辑

[英]Logic to print month according to selected month in table using JavaScript

 原文  2018-06-25 20:04:02  7   2    javascript/ html/ jquery/ date/ dom-events

问题描述

I'm getting signin time and signout time but both are simultaneously means when I click on signin signout time becoming empty when I click on signout time signin time becoming empty this happening because using two different functions onSigninClick() and onSignoutClick() for different buttons.我正在获取登录时间和退出时间，但两者同时意味着当我点击登录时退出时间变空当我点击退出时间时登录时间变空这是因为对不同的按钮使用两个不同的函数onSigninClick()和onSignoutClick() . How can I print both without loosing another value and also for total hours also please help me with the code in Javascript:如何在不丢失另一个值和总小时数的情况下打印，也请帮助我使用 Javascript 中的代码：

<!DOCTYPE html>
<html>

 <head>
 
  <title>Employee Attendance</title>
 </head>
<body background="b.jpg">
 <center>
  <div align="right">
   <button onclick="onSigninClick()">Signin</button>
   <button onClick="onSignoutClick()">Signout</button>
</div>
 Month:
  <select name="month" id="month" onchange="getMonth(this.value)">
   <option value="">Select Month</option>
   <option value="0">January</option>
   <option value="1">February</option>
   <option value="2">March</option>
   <option value="3">April</option>
   <option value="4">May</option>
   <option value="5">June</option>
   <option value="6">July</option>
   <option value="7">August</option>
   <option value="8">September</option>
   <option value="9">October</option>
   <option value="10">Novermber</option>
   <option value="11">December</option>
  </select>
<table id="monData" border="" cellpadding="15">
 <tr>
  <th>Date</th>
  <th>Sign In</th>
  <th>Sign Out</th>
  <th>Total Hours</th>
 </tr>
</table>
</center>
<script type="text/javascript">
 function onSigninClick(){
    
     var now = new Date();
 var time = now.getHours() + ":" + now.getMinutes();
 document.getElementById("month").value= now.getMonth()
 getMonth(now.getMonth())
 document.getElementById("signin" + now.getDate()).innerHTML = time;

 }
 function onSignoutClick(){
     var now = new Date();
     var time = now.getHours() + ":" + now.getMinutes();
     document.getElementById("month").value= now.getMonth()
     getMonth(now.getMonth())
     document.getElementById("signout" + now.getDate()).innerHTML = time;
 }
 
 function get_days_in_month(month,year) {
  return new Date(year, month, 0).getDate();
 }

function getMonth(selected_month){  
 var current_year = new Date().getFullYear()
 var selected_month = (parseInt(selected_month)+1)
 if(month=="")
  alert("Please select Month");
 else{
  var finTab="<tr><th>Date</th><th>Sign In</th><th>Sign Out</th><th>Total Hours</th></tr>";
  var days_in_month = get_days_in_month(selected_month,current_year);
  //alert(days_in_month); 
  for(i =1;i<=days_in_month;i++){
    finTab = finTab + "<tr>";
    finTab = finTab + "<td>"+i+"/" + selected_month   + "/" + current_year + "</td><td id=signin" + i + "></td><td id=signout" + i + "></td><td></td>";
    finTab = finTab + "<tr>";
  } 
  document.getElementById("monData").innerHTML = finTab;
 }  
}    
</script>     
</body>
</html>

2 个解决方案

解决方案1
 1 已采纳  2018-06-27 05:44:47

As Ravi says, the month values are better to be the month number rather than the number of days in the month.正如 Ravi 所说，月份值最好是月份数而不是月份中的天数。 Also, if you're going to have multiple submit buttons, better to put the controls in a form and give the buttons a name so you can tell which one was clicked.此外，如果您打算有多个提交按钮，最好将控件放在一个表单中并为这些按钮命名，以便您可以知道单击了哪个按钮。

I'd use a tbody for the rows so that you don't have to regenerate the header each time.我会为行使用 tbody，这样您就不必每次都重新生成标题。 You can even set the number of cells in the new rows to be whatever the number of cells are in the header row so you can adjust the number of cells without having to adjust the function.您甚至可以将新行中的单元格数量设置为标题行中的任何单元格数量，这样您就可以调整单元格数量而无需调整函数。 You could also put a class on the date header cell so you know which column to put the date into.您还可以在日期标题单元格上放置一个类，以便您知道将日期放入哪一列。

I've used a thead for the header row, but you could just use another tbody (a table can have multiple tbodies).我在标题行中使用了 thead，但您可以只使用另一个 tbody（一个表可以有多个 tbodies）。

Eg例如

 // Helper to format a date as DD/MM/YYYY function formatDate(d) { var z = x => ('0'+x).slice(-2); return z(d.getDate()) + '/' + z(d.getMonth()+1) + '/' + d.getFullYear(); } function getMonth(month) { // Get the monData tbody and clear the rows var tbody = document.getElementById('monData'); while (tbody.rows.length) { tbody.removeChild(tbody.firstChild); } // Get the header row, number of cells and date cell index // The default date cell is 0 (the first one) var headRow = tbody.parentNode.rows[0]; var cellCount = headRow.cells.length; var dateIndex = headRow.querySelector('.dateCell').cellIndex || 0; // If selected first option, stop here if (month == 0) return; // Create a date for the start of the selected month in the current year var date = new Date(); month -= 1; date.setMonth(month, 1); // Create a document fragment with the required tr and tds var frag = document.createDocumentFragment(); var oRow = frag.appendChild(document.createElement('tr')); for (var i=0; i<cellCount; i++) { oRow.appendChild(document.createElement('td')); } // Clone the row once for each day of the month, putting a // formatted date in the first cell while (date.getMonth() == month) { var row = oRow.cloneNode(true); row.cells[dateIndex].textContent = formatDate(date); frag.appendChild(row); date.setDate(date.getDate()+1); } // Append the fragment of rows to the tbody tbody.appendChild(frag); }
 table { border-left: 1px solid #dddddd; border-top : 1px solid #dddddd; border-collapse: collapse; } th, td { border-right: 1px solid #dddddd; border-bottom : 1px solid #dddddd; width: 6em; }
 <form> <div align="right"> <input type="submit" value="Sign In" name="signIn"> <input type="submit" value="Sign Out" name="signOut"> </div> Month:<select name="month" id="month" onchange="getMonth(this.value)"> <option value="0">Select Month</option> <option value="1">January</option> <option value="2">February</option> <option value="3">March</option> <option value="4">April</option> <option value="5">May</option> <option value="6">June</option> <option value="7">July</option> <option value="8">August</option> <option value="9">September</option> <option value="10">October</option> <option value="11">November</option> <option value="12">December</option> </select> </form> <table> <head> <tr><th class="dateCell">Date</th><th>Sign In</th><th>Sign Out</th><th>Total Hours</th></tr> </head> <tbody id="monData"> </tbody> </table>

解决方案2
 0  2018-06-26 03:28:26

Have done a few changes in option values instead of days in each month have just assigned the values of month starting from 0 to 11. And used the js datetime object new Date() to get the current year, date and time using getFullyear() getDate() .对选项值进行了一些更改，而不是每个月的天数刚刚分配了从 0 到 11 的月份值。并使用 js datetime 对象new Date()使用getFullyear()获取当前年份、日期和时间getDate() 。

function get_days_in_month(month,year) you can call this function which will return the total days in that particular month takes 2 args as month and year. function get_days_in_month(month,year)您可以调用此函数，该函数将返回该特定月份的总天数，以 2 个参数作为月份和年份。

Clicking Sign In Button will call onSigninClick() .单击登录按钮将调用onSigninClick() 。 Where the Month value will be set to the current month in case the user has selected other month and have called getMonth() which will render the table of the current month.如果用户选择了其他月份并调用了getMonth()将呈现当前月份的表格，则 Month 值将设置为当前月份。 Also, have assigned a var time with the current time when the Sign in button is clicked with the value in HH:MM:SS format.此外，当单击“登录”按钮时，使用 HH:MM:SS 格式的值为当前时间分配了一个 var 时间。

finTab = finTab + "<td>"+i+"/" + selected_month   + "/" + current_year + "</td><td id=signin_" + i + "></td><td></td><td></td>"

The value will be print to the particular day row using the column id that I have assigned in the code.该值将使用我在代码中分配的列 id 打印到特定的日期行。

<!DOCTYPE html>
<html>
 <head>
  <title>Employee Attendance</title>
 </head>
<body>
 <center>
  <div align="right">
   <button onclick="onSigninClick()">Sign In</button>
   <button>Sign out</button>
</div>
 Month: 
  <select name="month" id="month" onchange="getMonth(this.value)">
   <option value="">Select Month</option>
   <option value="0">January</option>
   <option value="1">February</option>
   <option value="2">March</option>
   <option value="3">April</option>
   <option value="4">May</option>
   <option value="5">June</option>
   <option value="6">July</option>
   <option value="7">August</option>
   <option value="8">September</option>
   <option value="9">October</option>
   <option value="10">Novermber</option>
   <option value="11">December</option>
  </select>
<table id="monData" border="" cellpadding="15">
 <tr>
  <th>Date</th>
  <th>Sign In</th>
  <th>Sign Out</th>
  <th>Total Hours</th>
 </tr>
</table>
</center>
<script type="text/javascript">

//  Will be called on Click of Signin Button
 function onSigninClick(){
 var now = new Date(); //  javascript datetime object 
 var time = now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();  // Time in HH:MM:SS format 
 document.getElementById("month").value= now.getMonth()  // Set the value of Select Tag
 getMonth(now.getMonth())  // Update the table based on current month
 document.getElementById("signin_" + now.getDate()).innerHTML = time  // print the signin date on respective date
}

// function to get total days in a particular month
 function get_days_in_month(month,year) {
  return new Date(year, month, 0).getDate();
 };

// function to render the month table
function getMonth(selected_month){  
 var current_year = new Date().getFullYear() // current year 
 var selected_month = (parseInt(selected_month)+1)  // selected month 

 if(!month)  // if month not selected alert user
  alert("Please select Month");
 else{
  var finTab="<tr><th>Date</th><th>Sign In</th><th>Sign Out</th><th>Total Hours</th></tr>";
  var days_in_month = get_days_in_month(selected_month,current_year)
  for(i =1;i<=days_in_month;i++){
    finTab = finTab + "<tr>";
    finTab = finTab + "<td>"+i+"/" + selected_month   + "/" + current_year + "</td><td id=signin_" + i + "></td><td></td><td></td>";
    finTab = finTab + "<tr>";
  } 
  document.getElementById("monData").innerHTML = finTab;  // will push the string in the element.
 }  
}    
</script>     
</body>
</html>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使用javascript根据表中的月份对日期列进行排序？ - How to sort the date column according to month in a table using javascript? Javascript过滤表上月 - Javascript filter table on month 如何使用Javascript AngularJS打印一个月的所有日期 - How to print all the dates of a month using Javascript AngularJS 使用Javascript逐月将JSON解析为表 - Parse JSON to table by month with Javascript 使用刀片模板中的JavaScript在html表中显示月份和日期 - Displaying Month and Days inside html table using JavaScript in blade template 根据用户从JSON文件中选择的月份显示图表 - Display charts according to month selected by user from JSON file 按下拉框中选定的月份过滤表格 - Filter table by Selected month in dropdown box 在JavaScript中根据选定的月份获取星期一日期 - Get mondays dates based on selected month in javascript 根据月份显示数据 - Display data according to month 如何将选定的日期月份和年份打印到不同的div标签中 - how to print selected date month and year into different div tag
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM