Question

我使用.append在html中的div（id = calendarData）上构建了一个表：

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

每次抛出错误＆＃39;无法更改未定义的背景颜色＆＃34; 我有什么想法吗？

Answer 1

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

要在事后设置注入的HTML类，您可以提前将类添加到CSS中，也可以使用jQuery .css()通过jQuery添加样式：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: