用javascript写一个动态表,第一行居中为“技术网络科考勤表”,第二行居中为年月,年和月需要动态生成,根据当年闰年还是平年,可生成2月天数。第三行从左到右根据年月生成当月日期,第四行根据第三行生成当星期几。此表格第一列为人名,中间内容为可选择√或者休假输入。最后一列统计出此行√天数。
时间: 2024-03-15 16:47:13 浏览: 55
好的,可以用以下的Javascript代码实现:
```html
<!DOCTYPE html>
<html>
<head>
<title>动态表</title>
<meta charset="UTF-8">
<style type="text/css">
table {
border-collapse: collapse;
margin: auto;
text-align: center;
}
td, th {
border: 1px solid black;
padding: 5px;
}
.week {
background-color: #ddd;
}
.total {
background-color: #eee;
font-weight: bold;
}
</style>
</head>
<body>
<script type="text/javascript">
// 获取当前年月
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth() + 1;
// 判断是否闰年
var isLeapYear = false;
if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
isLeapYear = true;
}
// 获取该月天数
var daysInMonth = [31, isLeapYear ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
var days = daysInMonth[month - 1];
// 生成表格
var table = document.createElement("table");
// 第一行:标题
var row = table.insertRow();
var cell = row.insertCell();
cell.colSpan = days + 2;
cell.innerHTML = "技术网络科考勤表";
// 第二行:年月
row = table.insertRow();
cell = row.insertCell();
cell.colSpan = days + 2;
cell.innerHTML = year + "年" + month + "月";
// 第三行:日期
row = table.insertRow();
cell = row.insertCell();
cell.innerHTML = "姓名";
for (var i = 1; i <= days; i++) {
cell = row.insertCell();
cell.innerHTML = i;
}
// 第四行:星期几
row = table.insertRow();
cell = row.insertCell();
cell.innerHTML = "";
for (var i = 1; i <= days; i++) {
cell = row.insertCell();
var date = new Date(year, month - 1, i);
var week = date.getDay();
cell.innerHTML = "日一二三四五六".charAt(week);
cell.className = "week";
}
// 第五行及以后:人名和勾选框
var names = ["张三", "李四", "王五", "赵六", "钱七"];
for (var i = 0; i < names.length; i++) {
row = table.insertRow();
cell = row.insertCell();
cell.innerHTML = names[i];
for (var j = 1; j <= days; j++) {
cell = row.insertCell();
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
cell.appendChild(checkbox);
}
cell = row.insertCell();
cell.innerHTML = 0;
cell.className = "total";
}
// 统计√天数
function countTotal() {
var rows = table.rows;
for (var i = 5; i < rows.length; i++) {
var row = rows[i];
var total = 0;
for (var j = 1; j <= days; j++) {
var checkbox = row.cells[j].getElementsByTagName("input")[0];
if (checkbox.checked) {
total++;
}
}
row.cells[days + 1].innerHTML = total;
}
}
// 监听勾选框变化
table.addEventListener("change", countTotal);
// 显示表格
document.body.appendChild(table);
</script>
</body>
</html>
```
代码解析:
1. 首先获取当前年月,并判断是否闰年,根据年月生成该月天数。
2. 然后创建一个表格,插入四行数据:第一行为标题,第二行为年月,第三行为日期,第四行为星期几。
3. 接着生成每个人的一行,包括姓名和勾选框,最后一列为√天数统计。
4. 最后定义一个函数`countTotal`,用于统计每行的√天数,并将其显示在最后一列。
5. 监听表格中勾选框的变化,一旦勾选发生变化,则调用`countTotal`函数重新计算√天数。
阅读全文