javascript - 无法使用 innerHTML 让表格行在 Javascript 中工作
问题描述
我必须使用 Javascript 为学校项目创建日历应用程序。该表必须使用 innerHTML 属性创建。我已经设法让一切正常工作,但由于某种原因无法弄清楚为什么没有创建日历的行 - 所有的日子都堆积成一长列。我已经在适当的地方插入了标签(我认为)。
完整的 JSFiddle 在这里:https ://jsfiddle.net/68294kdh/
var date = new Date();
var month = date.getMonth();
var monthName = getMonthText(month);
var year = date.getFullYear();
var firstDay = new Date(year, month, 1);
var lastDay = getLastDayofMonth(month);
$('month_year').innerHTML = monthName + ' ' + year;
var day = 0;
$('calendar').innerHTML += "<tr>";
for(i=0; i<7; i++) {
if(i >= firstDay.getDay()) {
day++;
$('calendar').innerHTML += '<td>' + day + '</td>';
} else {
$('calendar').innerHTML += '<td>' + ' ' + '</td>';
}
}
$('calendar').innerHTML += "</tr>";
for(i=0; i<4; i++) {
$('calendar').innerHTML += '<tr>';
for(j=0; j<7; j++) {
if(day < lastDay) {
day++;
$('calendar').innerHTML += '<td>' + day + '</td>';
} else {
$('calendar').innerHTML += '<td>' + ' ' + '</td>';
}
}
$('calendar').innerHTML += '</tr>';
}
解决方案
您需要同时为表格添加所有 HTML。尝试这样的事情:
window.onload = function () {
var date = new Date();
var month = date.getMonth();
var monthName = getMonthText(month);
var year = date.getFullYear();
var firstDay = new Date(year, month, 1);
var lastDay = getLastDayofMonth(month);
$('month_year').innerHTML = monthName + ' ' + year;
var day = 0;
var htmlString = "";
var htmlString += '<tr>';
for(i=0; i<7; i++) {
if(i >= firstDay.getDay()) {
day++;
htmlString += '<td>' + day + '</td>';
} else {
htmlString += '<td>' + ' ' + '</td>';
}
}
htmlString += '</tr>';
for(i=0; i<4; i++) {
htmlString += '<tr>';
for(j=0; j<7; j++) {
if(day < lastDay) {
day++;
htmlString += '<td>' + day + '</td>';
} else {
htmlString += '<td>' + ' ' + '</td>';
}
}
htmlString += '</tr>';
}
$('calendar').innerHTML+=htmlString;
};
推荐阅读
- reactjs - React hooks useState 第二次从子组件提交
- c# - 表格无法打开以显示信息
- java - 即使在 ubuntu 上升级到最新版本,ELK 也会提示升级 java 版本
- amazon-s3 - 关于外部资源的 AWS MediaConvert SQS 错误
- kotlin - 我用 Ktor 编写了一个简单的反向代理,但发生错误:io.ktor.http.UnsafeHeaderException
- security - 如果我的服务仅在 K8 集群中被调用/公开,是否需要 HTTPS
- javascript - 如何阻止 npm 版本补丁格式化我的打字稿代码
- sql - 您如何更改 2019 SSRS 报告以打开 Chrome 浏览器而不是 Internet Explorer
- flutter - 使用用户配置文件进行颤振状态管理
- python - Python BeautifulSoup 从动态页面获取 html