javascript - 我该怎么做才能在没有适当类(class)的情况下设置表格样式?

标签 javascript jquery html css fullcalendar

<分区>

我正在使用 FullCalendar,它输出如下: enter image description here 像这样:

<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;◄&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;►&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>

不幸的是,这些类中有很多对于样式化来说毫无用处。

以下是我想做的几件事: 我希望突出显示每个星期一,但没有类(class)知道这是星期一,day35 或 day37 对我来说意义不大。

我希望修复 Resources 列,但是,根据它的构建方式,我不确定这是否可行。

请问有人能告诉我如何针对这两个问题提出解决方案吗?

谢谢

最佳答案

最好从 php 或 javascript 动态生成这个,但鉴于这种情况,我可能只为星期一添加一个类。

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

您拥有的源代码使用了一些不良做法(未使用 <br />,内联样式)。

然后突出显示 .monday CSS 中的类。

关于javascript - 我该怎么做才能在没有适当类(class)的情况下设置表格样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15144096/

相关文章:

jquery - 想要使用 Jquery 或 javascript 在不点击的情况下调用 rel 属性

html - 为什么宽度在表格单元格中不起作用?

html - 在 Mailchimp 事件中使用 Font Awesome 图标

javascript - 获取输入文件值并制作图像

javascript - Node.js:在二进制数组上迭代哪个命令

javascript - 如何停止将值附加到仅更新 jQuery 中的值?

javascript - requirejs 不使用 shim 将本地 jquery 暴露给 jquery 插件

css - div 布局(浮在其他元素上)

javascript - 位掩码:如何确定是否只设置了一位

javascript - 如何同时合并和平展数组