javascript - 如何使用 Jquery 选择附加表的元素

Question

我通过在 html 中的 div (id = calendarData) 上使用 .append 构建了一个表:

 $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>'
                        );

然后我将所有单元格添加到表格中:

 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>'
                        );

在此之后，我需要返回并选择每个 td，如果那天是事件的(在稍后的函数中确定)，则给它一个颜色，但每次我尝试获取它时，系统都会返回 undefined。

一切来自:

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

到

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

每次它抛出错误“无法更改未定义的背景颜色”知道我做错了什么吗？

Answer 1

不确定为什么在我的示例中将日期加倍，但这不是重点。

要在事后为注入(inject)的 HTML 类添加样式，您可以提前将类添加到 CSS，或者可以使用 jQuery .css() 通过 jQuery 添加样式:

setTimeout(function(){
  $('.active').css({'color':'maroon','font-weight':'bold','background':'yellow'});
},3000);

$('#calendarData').append('\
	<table class="grid" id="calendar" href="#" style="max-width:1200px">\
		<th colspan="7" align=""center">' +'June'+ "" + '2016' + '</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></tr>'
);

setTimeout(function(){
//This mimics your generated / injected code
$('#calendarData > table > tbody').append('\
	<tr><td class="square">1</td><td class="square">2</td><td class="square">3</td><td class="square">4</td><td class="square">5</td><td class="square">6</td><td class="square">7</td></tr>\
	<tr><td class="square">8</td><td class="square">9</td><td class="square">10</td><td class="square active">11</td><td class="square">12</td><td class="square">13</td><td class="square">14</td></tr>\
	<tr><td class="square">15</td><td class="square">16</td><td class="square">17</td><td class="square">18</td><td class="square">19</td><td class="square">20</td><td class="square">21</td></tr>\
	<tr><td class="square">22</td><td class="square">23</td><td class="square">24</td><td class="square">25</td><td class="square">26</td><td class="square">27</td><td class="square">28</td></tr>\
	</tbody></table>'
);
},1500);

.square{text-align:center;}
.active{font-style:italic;font-size:larger;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="calendarData"></div>