Выделение выбранных полей в динамически добавленных строках заставляет их исчезнуть

Question

ПРИМЕЧАНИЕ. Пожалуйста, не отвечайте на вопросы JQuery, сначала нужно опустить Javascript.

Итак, я добавил несколько строк в таблицу через insertRow (-1). Когда я пытаюсь найти эту таблицу через getElementById и меняю цвет фона поля, он отлично работает для первой добавленной строки: «даты [] .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"); 

To:

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>