javascript - Highlighting selected fields in dynamically added rows makes them disappear -

note: please no jquery answers, need head around javascript first.

so have added rows table through insertrow(-1). when try table via getelementbyid , change background color of field, works fine first added row: "dates[4].style.backgroundcolor = '#ff0000';"

but not second added row or thereafter, disappear:

"dates[7].style.backgroundcolor = '#ff0000';

i trying highlight current day (will replace numbers 4/7 variable) i'm not sure whats happening, shed light please?

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> 

change:

var table1 = document.getelementbyid("rowclassname"); 

to:

var table1 = document.getelementbyid("calendar"); 

explanation:

you getting cells current row using "rowclassname". each row consists of 7 elements (mon-sun). [7] means selecting 8th cell in row, doesn't exist (javascript arrays 0-based - first element starts 0).

so want count number of table cells start of table, inclusive of in first row.

also, if way, table cell trying reference may not been created loop yet. should set red color outside of 2 loops, or set class cell, , use css style background color.

snippet:

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;  (i = 0; < 5; i++) {    var table = document.getelementbyid("calendar");    var row = table.insertrow(-1);    row.setattribute("id", "rowclassname"+1, 0);      (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>