基于特定参数将类附加到TD标记,并使用JavaScript包含标记的innerHTML
这有点棘手,我正在寻找一个好的JavaScript解决方案,而不需要修改它自己的源代码 jQueryUI datepicker小部件正在组成一个月控件,其HTML格式如下:基于特定参数将类附加到TD标记,并使用JavaScript包含标记的innerHTML,javascript,jquery,html,jquery-ui,Javascript,Jquery,Html,Jquery Ui,这有点棘手,我正在寻找一个好的JavaScript解决方案,而不需要修改它自己的源代码 jQueryUI datepicker小部件正在组成一个月控件,其HTML格式如下: <div id="mjcEvents_pJuiCalendar"><div class="UC_JuiCalendar Panel datepicker hasDatepicker"><div class="ui-datepicker-inline ui-datepicker ui-widget
<div id="mjcEvents_pJuiCalendar"><div class="UC_JuiCalendar Panel datepicker hasDatepicker"><div class="ui-datepicker-inline ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="display: block;">
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all"><a class="ui-datepicker-prev ui-corner-all" data-handler="prev" data-event="click" title="Prev"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a><div class="ui-datepicker-title"><span class="ui-datepicker-month">Juni-Events</span> <span class="ui-datepicker-year">2013</span></div>
</div>
<table class="ui-datepicker-calendar">
<thead>
<tr>
<th class="ui-datepicker-week-col">W</th>
<th><span title="Monday">M</span></th>
<th><span title="Tuesday">D</span></th>
<th><span title="Wednesday">M</span></th>
<th><span title="Thursday">D</span></th>
<th><span title="Friday">F</span></th>
<th class="ui-datepicker-week-end"><span title="Saturday">S</span></th>
<th class="ui-datepicker-week-end"><span title="Sunday">S</span></th>
</tr>
</thead>
<tbody>
<tr>
<td class="ui-datepicker-week-col">22</td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">27</span></td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">28</span></td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">29</span></td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">30</span></td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">31</span></td>
<td class=" ui-datepicker-week-end ui-datepicker-today" data-handler="selectDay" data-event="click" data-month="5" data-year="2013"><a class="ui-state-default ui-state-highlight" href="#">1</a></td>
<td class=" ui-datepicker-week-end ui-datepicker-days-cell-over ui-datepicker-current-day" data-handler="selectDay" data-event="click" data-month="5" data-year="2013"><a class="ui-state-default" href="#">2</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-col">23</td>
<td class=" " data-handler="selectDay" data-event="click" data-month="5" data-year="2013"><a class="ui-state-default" href="#">3</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="5" data-year="2013"><a class="ui-state-default" href="#">4</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="5" data-year="2013"><a class="ui-state-default" href="#">5</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="5" data-year="2013"><a class="ui-state-default" href="#">6</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="5" data-year="2013"><a class="ui-state-default" href="#">7</a></td>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="5" data-year="2013"><a class="ui-state-default" href="#">8</a></td>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="5" data-year="2013"><a class="ui-state-default" href="#">9</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-col">24</td>
<td class=" " data-handler="selectDay" data-event="click" data-month="5" data-year="2013"><a class="ui-state-default" href="#">10</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="5" data-year="2013"><a class="ui-state-default" href="#">11</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="5" data-year="2013"><a class="ui-state-default" href="#">12</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="5" data-year="2013"><a class="ui-state-default" href="#">13</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="5" data-year="2013"><a class="ui-state-default" href="#">14</a></td>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="5" data-year="2013"><a class="ui-state-default" href="#">15</a></td>
<td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">16</span></td>
</tr>
<tr>
<td class="ui-datepicker-week-col">25</td>
<td class=" ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">17</span></td>
<td class=" ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">18</span></td>
<td class=" ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">19</span></td>
<td class=" ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">20</span></td>
<td class=" ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">21</span></td>
<td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">22</span></td>
<td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">23</span></td>
</tr>
<tr>
<td class="ui-datepicker-week-col">26</td>
<td class=" ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">24</span></td>
<td class=" ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">25</span></td>
<td class=" ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">26</span></td>
<td class=" ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">27</span></td>
<td class=" ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">28</span></td>
<td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">29</span></td>
<td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">30</span></td>
</tr>
</tbody>
</table>
23
24
16
25
17
18
19
20
21
22
23
26
24
25
26
27
28
29
30
现在我想通过提供日期来访问特定的TD标签,它应该尽可能快地跳过其他月份的案例,因此每次我更改月份时,它都会被调用数次(等于天案例)
所有重要的TD标签都有一个A标签,包括。其他人可以忽略,因为他们在特定月份之外
所以我需要一个函数markEvent(parentSelector,年,月,日)
ie.markEvent($('mjcEvents_pJuiCalendar'),2013,5,7)
将在
的TD标记上追加一个新类,如isEvent
。正如您所看到的,在我的例子中使用jQuery非常好
谢谢你的建议。尽量多使用类,然后你可以
$('.highlighted')。removeClass('highlighted')然后是$('.monthClass.dayClass.yearClass').addClass('highlithed')但我不能,这就是重点。这里显示的HTML是由jQueryUI生成的,所以我必须用JS读取它的data-*
参数。添加类本身非常简单。那么,你知道我怎样才能做到这一点吗?那么<代码>$('td[data month=5][data year=2013]')。每个(函数(){markIfContainsDate(this,7);})如果($(this.child('a').html()==7){$(this.addClass('highlighted');}
,这看起来不错,我将测试它并很快做出响应。谢谢