javascript - 適切なクラスなしでテーブルのスタイルを設定するにはどうすればよいですか？

Question

私はFullCalendarを使用していますが、次 のように出力されます。

<div id="calendar" class="fc">
    <table class="fc-header" style="width: 100%">
        <tbody>
            <tr>
                <td class="fc-header-left"><span class="fc-button fc-button-prev fc-state-default fc-corner-left"><span class="fc-button-inner"><span class="fc-button-content">&nbsp;◄&amp;nbsp;</span><span class="fc-button-effect"><span></span></span></span></span><span class="fc-button fc-button-next fc-state-default fc-corner-right"><span class="fc-button-inner"><span class="fc-button-content">&nbsp;►&amp;nbsp;</span><span class="fc-button-effect"><span></span></span></span></span><span class="fc-header-space"></span><span class="fc-button fc-button-today fc-state-default fc-corner-left fc-corner-right fc-state-disabled"><span class="fc-button-inner"><span class="fc-button-content">today</span><span class="fc-button-effect"><span></span></span></span></span></td>
                <td class="fc-header-center"><span class="fc-header-title">
                    <h2>Feb 25 — Jun 7 2013</h2>
                </span></td>
                <td class="fc-header-right"></td>
            </tr>
        </tbody>
    </table>
    <div class="fc-content" style="position: relative; min-height: 1px;">
        <div class="fc-view fc-view-resourceNextWeeks fc-grid" style="position: relative;" unselectable="on">
            <table class="fc-border-separate" style="width: 100%" cellspacing="0">
                <thead>
                    <tr class="fc-first fc-last">
                        <th class="fc-resourceName">&nbsp;</th>
                        <th class="fc-id0 fc-widget-header fc-first" style="width: 13px;">Mon 2/25<br>
                            Week 9</th>
                        <th class="fc-id1 fc-widget-header" style="width: 13px;">Tue 2/26</th>
                        <th class="fc-id2 fc-widget-header" style="width: 13px;">Wed 2/27</th>
                        <th class="fc-id3 fc-widget-header" style="width: 13px;">Thu 2/28</th>
                        <th class="fc-id4 fc-widget-header" style="width: 13px;">Fri 3/1</th>
                        <th class="fc-id5 fc-widget-header" style="width: 13px;">Mon 3/4<br>
                            Week 10</th>
                        <th class="fc-id6 fc-widget-header" style="width: 13px;">Tue 3/5</th>
                        <th class="fc-id7 fc-widget-header" style="width: 13px;">Wed 3/6</th>
                        <th class="fc-id8 fc-widget-header" style="width: 13px;">Thu 3/7</th>
                        <th class="fc-id9 fc-widget-header" style="width: 13px;">Fri 3/8</th>
                        <th class="fc-id10 fc-widget-header" style="width: 13px;">Mon 3/11<br>
                            Week 11</th>
                        <th class="fc-id11 fc-widget-header" style="width: 13px;">Tue 3/12</th>
                        <th class="fc-id12 fc-widget-header" style="width: 13px;">Wed 3/13</th>
                        <th class="fc-id13 fc-widget-header" style="width: 13px;">Thu 3/14</th>
                        <th class="fc-id14 fc-widget-header" style="width: 13px;">Fri 3/15</th>
                        <th class="fc-id15 fc-widget-header" style="width: 13px;">Mon 3/18<br>
                            Week 12</th>
                        <th class="fc-id16 fc-widget-header" style="width: 13px;">Tue 3/19</th>
                        <th class="fc-id17 fc-widget-header" style="width: 13px;">Wed 3/20</th>
                        <th class="fc-id18 fc-widget-header" style="width: 13px;">Thu 3/21</th>
                        <th class="fc-id19 fc-widget-header" style="width: 13px;">Fri 3/22</th>
                        <th class="fc-id20 fc-widget-header" style="width: 13px;">Mon 3/25<br>
                            Week 13</th>
                        <th class="fc-id21 fc-widget-header" style="width: 13px;">Tue 3/26</th>
                        <th class="fc-id22 fc-widget-header" style="width: 13px;">Wed 3/27</th>
                        <th class="fc-id23 fc-widget-header" style="width: 13px;">Thu 3/28</th>
                        <th class="fc-id24 fc-widget-header" style="width: 13px;">Fri 3/29</th>
                        <th class="fc-id25 fc-widget-header" style="width: 13px;">Mon 4/1<br>
                            Week 14</th>
                        <th class="fc-id26 fc-widget-header" style="width: 13px;">Tue 4/2</th>
                        <th class="fc-id27 fc-widget-header" style="width: 13px;">Wed 4/3</th>
                        <th class="fc-id28 fc-widget-header" style="width: 13px;">Thu 4/4</th>
                        <th class="fc-id29 fc-widget-header" style="width: 13px;">Fri 4/5</th>
                        <th class="fc-id30 fc-widget-header" style="width: 13px;">Mon 4/8<br>
                            Week 15</th>
                        <th class="fc-id31 fc-widget-header" style="width: 13px;">Tue 4/9</th>
                        <th class="fc-id32 fc-widget-header" style="width: 13px;">Wed 4/10</th>
                        <th class="fc-id33 fc-widget-header" style="width: 13px;">Thu 4/11</th>
                        <th class="fc-id34 fc-widget-header" style="width: 13px;">Fri 4/12</th>
                        <th class="fc-id35 fc-widget-header" style="width: 13px;">Mon 4/15<br>
                            Week 16</th>
                        <th class="fc-id36 fc-widget-header" style="width: 13px;">Tue 4/16</th>
                        <th class="fc-id37 fc-widget-header" style="width: 13px;">Wed 4/17</th>
                        <th class="fc-id38 fc-widget-header" style="width: 13px;">Thu 4/18</th>
                        <th class="fc-id39 fc-widget-header" style="width: 13px;">Fri 4/19</th>
                        <th class="fc-id40 fc-widget-header" style="width: 13px;">Mon 4/22<br>
                            Week 17</th>
                        <th class="fc-id41 fc-widget-header" style="width: 13px;">Tue 4/23</th>
                        <th class="fc-id42 fc-widget-header" style="width: 13px;">Wed 4/24</th>
                        <th class="fc-id43 fc-widget-header" style="width: 13px;">Thu 4/25</th>
                        <th class="fc-id44 fc-widget-header" style="width: 13px;">Fri 4/26</th>
                        <th class="fc-id45 fc-widget-header" style="width: 13px;">Mon 4/29<br>
                            Week 18</th>
                        <th class="fc-id46 fc-widget-header" style="width: 13px;">Tue 4/30</th>
                        <th class="fc-id47 fc-widget-header" style="width: 13px;">Wed 5/1</th>
                        <th class="fc-id48 fc-widget-header" style="width: 13px;">Thu 5/2</th>
                        <th class="fc-id49 fc-widget-header" style="width: 13px;">Fri 5/3</th>
                        <th class="fc-id50 fc-widget-header" style="width: 13px;">Mon 5/6<br>
                            Week 19</th>
                        <th class="fc-id51 fc-widget-header" style="width: 13px;">Tue 5/7</th>
                        <th class="fc-id52 fc-widget-header" style="width: 13px;">Wed 5/8</th>
                        <th class="fc-id53 fc-widget-header" style="width: 13px;">Thu 5/9</th>
                        <th class="fc-id54 fc-widget-header" style="width: 13px;">Fri 5/10</th>
                        <th class="fc-id55 fc-widget-header" style="width: 13px;">Mon 5/13<br>
                            Week 20</th>
                        <th class="fc-id56 fc-widget-header" style="width: 13px;">Tue 5/14</th>
                        <th class="fc-id57 fc-widget-header" style="width: 13px;">Wed 5/15</th>
                        <th class="fc-id58 fc-widget-header" style="width: 13px;">Thu 5/16</th>
                        <th class="fc-id59 fc-widget-header" style="width: 13px;">Fri 5/17</th>
                        <th class="fc-id60 fc-widget-header" style="width: 13px;">Mon 5/20<br>
                            Week 21</th>
                        <th class="fc-id61 fc-widget-header" style="width: 13px;">Tue 5/21</th>
                        <th class="fc-id62 fc-widget-header" style="width: 13px;">Wed 5/22</th>
                        <th class="fc-id63 fc-widget-header" style="width: 13px;">Thu 5/23</th>
                        <th class="fc-id64 fc-widget-header" style="width: 13px;">Fri 5/24</th>
                        <th class="fc-id65 fc-widget-header" style="width: 13px;">Mon 5/27<br>
                            Week 22</th>
                        <th class="fc-id66 fc-widget-header" style="width: 13px;">Tue 5/28</th>
                        <th class="fc-id67 fc-widget-header" style="width: 13px;">Wed 5/29</th>
                        <th class="fc-id68 fc-widget-header" style="width: 13px;">Thu 5/30</th>
                        <th class="fc-id69 fc-widget-header" style="width: 13px;">Fri 5/31</th>
                        <th class="fc-id70 fc-widget-header" style="width: 13px;">Mon 6/3<br>
                            Week 23</th>
                        <th class="fc-id71 fc-widget-header" style="width: 13px;">Tue 6/4</th>
                        <th class="fc-id72 fc-widget-header" style="width: 13px;">Wed 6/5</th>
                        <th class="fc-id73 fc-widget-header" style="width: 13px;">Thu 6/6</th>
                        <th class="fc-id74 fc-widget-header fc-last">Fri 6/7</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="fc-week114 fc-first" style="">
                        <td class="fc-resourceName">Josh Larouche</td>
                        <td class="fc-id0 fc-widget-content fc-day0 fc-resource114 fc-first">
                            <div>
                                <div class="fc-day-content">
                                    <div style="position: relative; height: 0px;">&nbsp;</div>
                                </div>
                            </div>
                        </td>
                        <td class="fc-id1 fc-widget-content fc-day1 fc-resource114">
                            <div>
                                <div class="fc-day-content">
                                    <div style="position: relative">&nbsp;</div>
                                </div>
                            </div>
                        </td>
                        <td class="fc-id2 fc-widget-content fc-day2 fc-resource114">
                            <div>
                                <div class="fc-day-content">
                                    <div style="position: relative">&nbsp;</div>
                                </div>
                            </div>
                        </td>
                        <td class="fc-id3 fc-widget-content fc-day3 fc-resource114 fc-state-highlight fc-today">
                            <div>
                                <div class="fc-day-content">
                                    <div style="position: relative">&nbsp;</div>
                                </div>
                            </div>
                        </td>
                        <td class="fc-id4 fc-widget-content fc-day4 fc-resource114">
                            <div>
                                <div class="fc-day-content">
                                    <div style="position: relative">&nbsp;</div>
                                </div>
                            </div>
                        </td>
                        <td class="fc-id5 fc-widget-content fc-day5 fc-resource114">
                            <div>
                                <div class="fc-day-content">
                                    <div style="position: relative">&nbsp;</div>
                                </div>
                            </div>
                        </td>
                        <td class="fc-id6 fc-widget-content fc-day6 fc-resource114">
                            <div>
                                <div class="fc-day-content">
                                    <div style="position: relative">&nbsp;</div>
                                </div>
                            </div>
                        </td>
                        <td class="fc-id7 fc-widget-content fc-day7 fc-resource114">
                            <div>
                                <div class="fc-day-content">
                                    <div style="position: relative">&nbsp;</div>
                                </div>
                            </div>
                        </td>
                        <td class="fc-id8 fc-widget-content fc-day8 fc-resource114">
                            <div>
                                <div class="fc-day-content">
                                    <div style="position: relative">&nbsp;</div>
                                </div>
                            </div>
                        </td>
                        <td class="fc-id9 fc-widget-content fc-day9 fc-resource114">
                            <div>
                                <div class="fc-day-content">
                                    <div style="position: relative">&nbsp;</div>
                                </div>
                            </div>
                        </td>
                        <td class="fc-id10 fc-widget-content fc-day10 fc-resource114">
                            <div>
                                <div class="fc-day-content">
                                    <div style="position: relative">&nbsp;</div>
                                </div>
                            </div>
                        </td>
                        <td class="fc-id11 fc-widget-content fc-day11 fc-resource114">
                            <div>
                                <div class="fc-day-content">
                                    <div style="position: relative">&nbsp;</div>
                                </div>
                            </div>
                        </td>
                        <td class="fc-id12 fc-widget-content fc-day12 fc-resource114">
                            <div>
                                <div class="fc-day-content">
                                    <div style="position: relative">&nbsp;</div>
                                </div>
                            </div>
                        </td>
                        <td class="fc-id13 fc-widget-content fc-day13 fc-resource114">
                            <div>
                                <div class="fc-day-content">
                                    <div style="position: relative">&nbsp;</div>
                                </div>
                            </div>
                        </td>
                        <td class="fc-id14 fc-widget-content fc-day14 fc-resource114">
                            <div>
                                <div class="fc-day-content">
                                    <div style="position: relative">&nbsp;</div>
                                </div>
                            </div>
                        </td>
                        <td class="fc-id15 fc-widget-content fc-day15 fc-resource114">
                            <div>
                                <div class="fc-day-content">
                                    <div style="position: relative">&nbsp;</div>
                                </div>
                            </div>
                        </td>
                        <td class="fc-id16 fc-widget-content fc-day16 fc-resource114">
                            <div>
                                <div class="fc-day-content">
                                    <div style="position: relative">&nbsp;</div>
                                </div>
                            </div>
                        </td>
                        <td class="fc-id17 fc-widget-content fc-day17 fc-resource114">
                            <div>
                                <div class="fc-day-content">
                                    <div style="position: relative">&nbsp;</div>
                                </div>
                            </div>
                        </td>
                        <td class="fc-id18 fc-widget-content fc-day18 fc-resource114">
                            <div>
                                <div class="fc-day-content">
                                    <div style="position: relative">&nbsp;</div>
                                </div>
                            </div>
                        </td>
                        <td class="fc-id19 fc-widget-content fc-day19 fc-resource114">
                            <div>
                                <div class="fc-day-content">
                                    <div style="position: relative">&nbsp;</div>
                                </div>
                            </div>
                        </td>
                        <td class="fc-id20 fc-widget-content fc-day20 fc-resource114">
                            <div>
                                <div class="fc-day-content">
                                    <div style="position: relative">&nbsp;</div>
                                </div>
                            </div>
                        </td>
                        <td class="fc-id21 fc-widget-content fc-day21 fc-resource114">
                            <div>
                                <div class="fc-day-content">
                                    <div style="position: relative">&nbsp;</div>
                                </div>
                            </div>
                        </td>
                        <td class="fc-id22 fc-widget-content fc-day22 fc-resource114">
                            <div>
                                <div class="fc-day-content">
                                    <div style="position: relative">&nbsp;</div>
                                </div>
                            </div>
                        </td>
                        <td class="fc-id23 fc-widget-content fc-day23 fc-resource114">
                            <div>
                                <div class="fc-day-content">
                                    <div style="position: relative">&nbsp;</div>
                                </div>
                            </div>
                        </td>
                        <td class="fc-id24 fc-widget-content fc-day24 fc-resource114">
                            <div>
                                <div class="fc-day-content">
                                    <div style="position: relative">&nbsp;</div>
                                </div>
                            </div>
                        </td>
                        <td class="fc-id25 fc-widget-content fc-day25 fc-resource114">
                            <div>
                                <div class="fc-day-content">
                                    <div style="position: relative">&nbsp;</div>
                                </div>
                            </div>
                        </td>
                        <td class="fc-id26 fc-widget-content fc-day26 fc-resource114">
                            <div>
                                <div class="fc-day-content">
                                    <div style="position: relative">&nbsp;</div>
                                </div>
                            </div>
                        </td>
                        <td class="fc-id27 fc-widget-content fc-day27 fc-resource114">
                            <div>
                                <div class="fc-day-content">
                                    <div style="position: relative">&nbsp;</div>
                                </div>
                            </div>
                        </td>
                        <td class="fc-id28 fc-widget-content fc-day28 fc-resource114">
                            <div>
                                <div class="fc-day-content">
                                    <div style="position: relative">&nbsp;</div>
                                </div>
                            </div>
                        </td>
                        <td class="fc-id29 fc-widget-content fc-day29 fc-resource114">
                            <div>
                                <div class="fc-day-content">
                                    <div style="position: relative">&nbsp;</div>
                                </div>
                            </div>
                        </td>
                        <td class="fc-id30 fc-widget-content fc-day30 fc-resource114">
                            <div>
                                <div class="fc-day-content">
                                    <div style="position: relative">&nbsp;</div>
                                </div>
                            </div>
                        </td>
                        <td class="fc-id31 fc-widget-content fc-day31 fc-resource114">
                            <div>
                                <div class="fc-day-content">
                                    <div style="position: relative">&nbsp;</div>
                                </div>
                            </div>
                        </td>
                        <td class="fc-id32 fc-widget-content fc-day32 fc-resource114">
                            <div>
                                <div class="fc-day-content">
                                    <div style="position: relative">&nbsp;</div>
                                </div>
                            </div>
                        </td>
                        <td class="fc-id33 fc-widget-content fc-day33 fc-resource114">
                            <div>
                                <div class="fc-day-content">
                                    <div style="position: relative">&nbsp;</div>
                                </div>
                            </div>
                        </td>
                        <td class="fc-id34 fc-widget-content fc-day34 fc-resource114">
                            <div>
                                <div class="fc-day-content">
                                    <div style="position: relative">&nbsp;</div>
                                </div>
                            </div>
                        </td>
                        <td class="fc-id35 fc-widget-content fc-day35 fc-resource114">
                            <div>
                                <div class="fc-day-content">
                                    <div style="position: relative">&nbsp;</div>
                                </div>
                            </div>
                        </td>
                        <td class="fc-id36 fc-widget-content fc-day36 fc-resource114">
                            <div>
                                <div class="fc-day-content">
                                    <div style="position: relative">&nbsp;</div>
                                </div>
                            </div>
                        </td>
                        <td class="fc-id37 fc-widget-content fc-day37 fc-resource114">
                            <div>
                                <div class="fc-day-content">
                                    <div style="position: relative">&nbsp;</div>
                                </div>
                            </div>
                        </td>
                        <td class="fc-id38 fc-widget-content fc-day38 fc-resource114">
                            <div>
                                <div class="fc-day-content">
                                    <div style="position: relative">&nbsp;</div>
                                </div>
                            </div>
                        </td>
                        <td class="fc-id39 fc-widget-content fc-day39 fc-resource114">
                            <div>
                                <div class="fc-day-content">
                                    <div style="position: relative">&nbsp;</div>
                                </div>
                            </div>
                        </td>
                        <td class="fc-id40 fc-widget-content fc-day40 fc-resource114">
                            <div>
                                <div class="fc-day-content">
                                    <div style="position: relative">&nbsp;</div>
                                </div>
                            </div>
                        </td>
                        <td class="fc-id41 fc-widget-content fc-day41 fc-resource114">
                            <div>
                                <div class="fc-day-content">
                                    <div style="position: relative">&nbsp;</div>
                                </div>
                            </div>
                        </td>
                        <td class="fc-id42 fc-widget-content fc-day42 fc-resource114">
                            <div>
                                <div class="fc-day-content">
                                    <div style="position: relative">&nbsp;</div>
                                </div>
                            </div>
                        </td>
                        <td class="fc-id43 fc-widget-content fc-day43 fc-resource114">
                            <div>
                                <div class="fc-day-content">
                                    <div style="position: relative">&nbsp;</div>
                                </div>
                            </div>
                        </td>
        </tr>
        </tbody></table>
        <div style="position: absolute; z-index: 8; top: 0; left: 0">
            <div class="fc-event fc-event-skin fc-event-hori fc-event-draggable fc-corner-left fc-corner-right" style="position: absolute; z-index: 8; left: 187px; background-color: rgb(255, 0, 0); border-color: rgb(255, 0, 0); width: 83px; top: 603px;">
                <div class="fc-event-inner fc-event-skin" style="background-color: rgb(255,0,0); border-color: rgb(255,0,0)"><span class="fc-event-time">10:30a</span><span class="fc-event-title" style="background-color: rgb(255,0,0); border-color: rgb(255,0,0)">Meeting</span></div>
                <div class="ui-resizable-handle ui-resizable-e">&nbsp;&nbsp;&nbsp;</div>
            </div>
            <div class="fc-event fc-event-skin fc-event-hori fc-event-draggable fc-corner-right" style="position: absolute; z-index: 8; left: 83px; width: 66px; top: 603px;">
                <div class="fc-event-inner fc-event-skin"><span class="fc-event-title">Long Event</span></div>
                <div class="ui-resizable-handle ui-resizable-e">&nbsp;&nbsp;&nbsp;</div>
            </div>
        </div>
    </div>
</div>
</div>

残念ながら、これらのクラスの多くはスタイリングに役に立たないと感じています。

私がやりたいことがいくつかあります。毎週月曜日を強調表示したいのですが、それが月曜日であるかどうかを知るクラスはありません。35日目または37日目は私にとってあまり意味がありません。

[リソース]列を修正したいのですが、これがどのように構築されているかに基づいて、これが可能かどうかはわかりません。

誰かが私がこれらのいずれかの解決策をどのように考え出すことができるかについて何か洞察を持っていますか？

ありがとう

Answer 1

これはphpまたはjavascriptから動的に生成する方がよいでしょうが、この状況を考えると、おそらく月曜日のクラスを追加するだけです。

<th class="monday, fc-id20 fc-widget-header" style="width: 13px;">Mon 3/25<br>Week 13</th>

あなたが持っているそのソースコードは、いくつかの悪い習慣を使用しています（<br />インラインスタイルを使用していません）。

.monday次に、CSSでクラスを強調表示します。

Answer 2

私が読んだことから、fullCalendarのソースコードを編集する必要があります。このトピックはすでにWebで議論されています： FullCalendarで特定の日を色付けする方法はありますか？ https://code.google.com/p/fullcalendar/issues/detail?id=191

単純なCSSビューから、毎日の共通のインジケーターがない場合、それを処理するエレガントな方法はありません

Answer 3

Janがコメントで示唆したように、自分で検索する必要があります。それを行う方法は次のとおりです。

• まず、問題の適切なテーブルを見つけます。
• 次に、すべてのth要素を見つけます（ここに日付の部分があります）
• 次に、それらの要素をテキストを含む要素のみにフィルタリングしますMon
• 次に、それらの要素にクラスを追加します

http://jsfiddle.net/6YfKg/

$(function()
  {
      $('#calendar .fc-view-resourceNextWeeks thead th')
          .filter(function()
                  {
                      if($(this).text().indexOf('Mon ') == 0) return true;

                      return false;
                  })
          .addClass('monday');
  });