堆棧內存溢出
  簡體   English   中英

使用 JavaScript 根據表格中選定的月份打印月份的邏輯

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

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

問題描述

我正在獲取登錄時間和退出時間，但兩者同時意味着當我點擊登錄時退出時間變空當我點擊退出時間時登錄時間變空這是因為對不同的按鈕使用兩個不同的函數onSigninClick()和onSignoutClick() . 如何在不丟失另一個值和總小時數的情況下打印，也請幫助我使用 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

正如 Ravi 所說，月份值最好是月份數而不是月份中的天數。 此外，如果您打算有多個提交按鈕，最好將控件放在一個表單中並為這些按鈕命名，以便您可以知道單擊了哪個按鈕。

我會為行使用 tbody，這樣您就不必每次都重新生成標題。 您甚至可以將新行中的單元格數量設置為標題行中的任何單元格數量，這樣您就可以調整單元格數量而無需調整函數。 您還可以在日期標題單元格上放置一個類，以便您知道將日期放入哪一列。

我在標題行中使用了 thead，但您可以只使用另一個 tbody（一個表可以有多個 tbodies）。

例如

 // 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

對選項值進行了一些更改，而不是每個月的天數剛剛分配了從 0 到 11 的月份值。並使用 js datetime 對象new Date()使用getFullyear()獲取當前年份、日期和時間getDate() 。

function get_days_in_month(month,year)您可以調用此函數，該函數將返回該特定月份的總天數，以 2 個參數作為月份和年份。

單擊登錄按鈕將調用onSigninClick() 。 如果用戶選擇了其他月份並調用了getMonth()將呈現當前月份的表格，則 Month 值將設置為當前月份。 此外，當單擊“登錄”按鈕時，使用 HH:MM:SS 格式的值為當前時間分配了一個 var 時間。

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

該值將使用我在代碼中分配的列 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根據表中的月份對日期列進行排序？ Javascript過濾表上月 如何使用Javascript AngularJS打印一個月的所有日期 使用Javascript逐月將JSON解析為表 使用刀片模板中的JavaScript在html表中顯示月份和日期 根據用戶從JSON文件中選擇的月份顯示圖表 按下拉框中選定的月份過濾表格 在JavaScript中根據選定的月份獲取星期一日期 根據月份顯示數據 如何將選定的日期月份和年份打印到不同的div標簽中
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM