问使用JavaScript根据表中所选月份打印月份的逻辑
EN

Stack Overflow用户

提问于 2018-06-26 04:04:02

回答 2查看 790关注 0票数 1

我得到了signin time和signout time，但这两者都是同时发生的，意思是当我点击signin signout time时，signout time变为空signin time signin time变为空，这是因为使用了两个不同的函数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>

jquery

date

dom-events

javascript

html

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-06-27 13:44:48

正如Ravi所说，月份值最好是月份数字，而不是一个月中的天数。此外，如果您要有多个提交按钮，最好将这些控件放在一个表单中，并为这些按钮指定一个名称，这样您就可以知道哪个按钮被单击了。

我会对行使用tbody，这样你就不必每次都重新生成标题了。您甚至可以将新行中的单元格数量设置为标题行中的单元格数量，这样您就可以在不调整函数的情况下调整单元格的数量。您还可以在日期标题单元格上放置一个类，以便知道将日期放入哪一列。

我已经为标题行使用了一个标题，但是你可以使用另一个tbody (一个表可以有多个tbody)。

例如。

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

票数 1

Stack Overflow用户

发布于 2018-06-26 11:28:27

我对选项值做了一些更改，而不是每个月中的天数，只分配了从0到11的month值，并使用getFullyear() getDate()使用js datetime对象new Date()来获取当前的年份、日期和时间。

您可以调用此函数，它将返回该特定月份的总天数，使用2个参数作为function get_days_in_month(month,year)和year。

单击登录按钮将调用onSigninClick()。其中，如果用户选择了other month并调用了getMonth()，则Month值将被设置为当前月份，该调用将呈现当前月份的表。此外，我还为单击Sign in按钮时的当前时间分配了一个var时间，其中的值为HH:MM:SS。

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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51031073

复制

相似问题

问使用JavaScript根据表中所选月份打印月份的逻辑
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用JavaScript根据表中所选月份打印月份的逻辑EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用JavaScript根据表中所选月份打印月份的逻辑
EN