javascript - 在动态添加的行中突出显示所选字段会使它们消失

Question

注意:请不要回答 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>

Answer 1

改变:

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>