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

Question

注意：请不要Jquery回答，需要首先了解Javascript。

所以我通过insertRow（-1）在表中添加了一些行。 当我尝试通过getElementById查找该表并更改字段的背景颜色时，它适用于第一个添加的行： “date [ 4 ]。style.backgroundColor ='＃FF0000';”

但不是第二次添加的行或之后，它们就会消失：

“dates [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个元素（Mon-Sun）。 [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>