jeudi 23 juin 2016

How to Select an Element of An Appended Table With Jquery

I built a table by using .append on a div (id = calendarData) that is in the html:

 $j('#calendarData').append(
                              '<table class="grid" id="calendar" href="#" style="max-width:1200px"><th colspan="7" align=""center">' +
                              months[currentMonth] + "     " + currentYear + '</div></th><tbody>'+
                              '<tr><td>Sun</td><td>Mon</td><td>Tues</td><td>Wed</td><td>Thurs</td><td>Fri</td><td>Sat</td>'
                        );

Then I added all of the cells to the table:

 for(var i=0; i<6; i++){
                            $j('#calendar > tbody:last-child').append(
                                    '</tr><tr>'
                            );
                            for(var j=0;j<7;j++){
                                if(inMonth == 0 && day > getDaysInMonth(startDate.getMonth()-1)){
                                    day = 1;
                                    inMonth = 1;
                                }
                                else if(inMonth == 1 && day > getDaysInMonth(startDate.getMonth())){
                                    day = 1;
                                    inMonth == 2;
                                }
                                $j('#calendar > tbody:last-child').append(
                                        '<td class="square">' + day +  '</td>'
                                );
                                day++;
                            }
                        }
                        $j('#calendarData > tbody:last-child').append(
                              '</tr></tbody></table>'
                        );

After this I need to go back and select each td and give it a color if that day is active(determined in a later function) but every time I try to grab it the system comes back with undefined.

Everything from:

$j('#calendarData tbody:last-child').style.backgroundColor = 'green';

to

var t = document.getElementById("calendar");
var r = t.getElementsByTagName("tr")[0];
var d = r.getElementsByTagName("td")[0];
d.style.backgroundColor ='green';

Every time it throws an Error 'Cannot change Background Color of Undefined" Any ideas what I am doing wrong?

Aucun commentaire:

Enregistrer un commentaire