注意:请不要回答 Jquery,我需要先了解 Javascript。
所以我通过 insertRow(-1) 向我的表中添加了一些行。 当我尝试通过 getElementById 查找该表并更改字段的背景颜色时,它适用于第一个添加的行: “日期 [4].style.backgroundColor = '#FF0000';”
但不是在添加的第二行或之后,它们就消失了:
“日期[7].style.backgroundColor = '#FF0000';
我正在尝试突出显示当天(将用变量替换数字 4/7)我不确定发生了什么,请问有人能解释一下吗?
Javascript
<script type="text/javascript">
var currentTime = new Date()
var month = currentTime.getMonth() + 1
var day = currentTime.getDate()
var year = currentTime.getFullYear()
var hour = currentTime.getHours()
var min = currentTime.getMinutes()
//document.write(month + "/" + day + "/" + year)
var test = currentTime.getDay();
var day = currentTime.getDate()+1;
var month = currentTime.getMonth();
var full_year = currentTime.getFullYear();
var total_days = (daysInMonth(month,full_year));
var d=1;
function daysInMonth(month,year) {
return new Date(year, month, 0).getDate();
}
var temp = test+1;
for(i=0; i<5; i++){
var table = document.getElementById("calendar");
var row = table.insertRow(-1);
row.setAttribute("id", "rowClassName", 0);
for(c=1;c<8; c++){
if(d<test){
var newCell = row.insertCell(-1);
newCell.innerHTML = '0';
d++;
} else if ((temp-test)<=total_days){
var newCell = row.insertCell(-1);
newCell.innerHTML = (temp-test);
temp = temp+1;
if(temp==day){
var table1 = document.getElementById("rowClassName");
var dates = table1.getElementsByTagName('td');
dates[7].style.backgroundColor = '#FF0000';
}
}
}
}
HTML
<table id="calendar">
<tr>
<td>Mon</td>
<td>Tue</td>
<td>Wed</td>
<td>Thu</td>
<td>Fri</td>
<td>Sat</td>
<td>Sun</td>
</tr>
</table>
最佳答案
改变:
var table1 = document.getElementById("rowClassName");
收件人:
var table1 = document.getElementById("calendar");
解释:
您只能使用“rowClassName”获取当前行的单元格。每行仅包含 7 个元素(周一至周日)。 [7]
表示您正在选择该行中的第 8 个单元格,该单元格不存在(JavaScript 数组基于 0 - 第一个元素从 0 开始)。
现在您要做的是从表格的开头计算表格单元格的数量,包括第一行中的单元格。
此外,如果您这样做,您尝试引用的表格单元格可能尚未由循环创建。您应该在两个循环之外设置红色,或者为单元格设置一个类,并使用 CSS 设置背景颜色的样式。
片段:
var currentTime = new Date()
var month = currentTime.getMonth() + 1
var day = currentTime.getDate()
var year = currentTime.getFullYear()
var hour = currentTime.getHours()
var min = currentTime.getMinutes()
//document.write(month + "/" + day + "/" + year)
var test = currentTime.getDay();
var day = currentTime.getDate() + 1;
var month = currentTime.getMonth();
var full_year = currentTime.getFullYear();
var total_days = (daysInMonth(month, full_year));
var d = 1;
function daysInMonth(month, year) {
return new Date(year, month, 0).getDate();
}
var temp = test + 1;
for (i = 0; i < 5; i++) {
var table = document.getElementById("calendar");
var row = table.insertRow(-1);
row.setAttribute("id", "rowClassName"+1, 0);
for (c = 1; c < 8; c++) {
if (d < test) {
var newCell = row.insertCell(-1);
newCell.innerHTML = '0';
d++;
} else if ((temp - test) <= total_days) {
var newCell = row.insertCell(-1);
newCell.innerHTML = (temp - test);
temp = temp + 1;
if (temp == day) {
newCell.className = "current";
}
}
}
}
.current {
background-color: red;
}
<table id="calendar">
<tr>
<td>Mon</td>
<td>Tue</td>
<td>Wed</td>
<td>Thu</td>
<td>Fri</td>
<td>Sat</td>
<td>Sun</td>
</tr>
</table>
关于javascript - 在动态添加的行中突出显示所选字段会使它们消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31289845/