javascript - 使用 JavaScript 根据表中选定月份打印月份的逻辑
问题描述
我正在获取登录时间和注销时间,但两者同时意味着当我单击登录时,注销时间变为空,当我单击注销时间时,登录时间变为空,这是因为使用了两个不同的功能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>
解决方案
正如 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>
推荐阅读
- sharepoint - 从 MS 图形 API 获取共享点在线文档的标签和元数据
- angular - 角度参数已更新,但页面内容未更新
- excel - 选择带有空白单元格的整列和交替的空单元格
- amazon-web-services - DynamoDB for .net:数据模型中的表名
- node.js - fs.existsSync 在通过 create-react-app 需要 grpc 时不是函数错误
- wpf - WPF ListView 从标题的顶部和侧面删除边框
- c++ - 即使我在函数结束时返回了 C++ 未使用变量警告
- java - java.lang.IllegalStateException:未启动异常发生在行
- php-7.2 - PHP 7.2.7 警告:使用未定义的常量
- linux - 具有 sudo 访问权限的用户无法从 Ansible AWX 运行 sudo 命令,并出现错误“缺少 Sudo 密码”