Question

我一直试图用jquery操纵基本的HTML表日历。可在此处找到：http://qlint.nl/bootstrap/

如果您点击单元格内的任何位置，您将看到我尝试做的事情。每行有7个单元格，但只要您单击第二个单元格，所选日期就不会继续到下一行，而只会停在当前行的最大长度。

我用jquery尝试了所有东西，用.parent跳出当前的TR，然后转到下一个TR TD，但不能正确。

这是填充颜色的当前代码

$(function() {                       
$('td').click(function() { 
$('td').removeClass();
$(this).addClass('ochtend').next().addClass('ochtend').next().addClass('avond').next().addClass('avond').next().addClass('nacht').next().addClass('nacht'); 
}); });

我完全没有想法。我一直试图通过.next（）或＆＃39; td＆＃39;来到达下一个TD。包括在内。但没有任何效果。

最后，我想让所有单元格TD类在你点击的地方一起移动（就像打开页面时一样），所以当前的代码也不会这样做。但这是下一个问题：）

这是简单的表格HTML：

＆＃13;

    <h4 class="text-center"><b>januari</b></h4>
    <table class="table table-condensed">
    <thead>
        <tr>
            <th>ma</th>
            <th>di</th>
            <th>wo</th>
            <th>do</th>
            <th>vr</th>
            <th>za</th>
            <th>zo</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td>1</td>
            <td class="ochtend">2</td>
            <td class="ochtend">3</td>
            <td class="avond">4</td>
        </tr>
        <tr>
            <td class="avond">5</td>
            <td class="nacht">6</td>
            <td class="nacht">7</td>
            <td>8</td>
            <td>9</td>
            <td>10</td>
            <td>11</td>
        </tr>
        <tr>
            <td class="ochtend">12</td>
            <td class="ochtend">13</td>
            <td class="avond">14</td>
            <td class="avond">15</td>
            <td class="nacht">16</td>
            <td class="nacht">17</td>
            <td>18</td>
        </tr>
        <tr>
            <td>19</td>
            <td>20</td>
            <td>21</td>
            <td class="ochtend">22</td>
            <td class="ochtend">23</td>
            <td class="avond">24</td>
            <td class="avond">25</td>
        </tr>
        <tr>
            <td class="nacht">26</td>
            <td class="nacht">27</td>
            <td>28</td>
            <td>29</td>
            <td>30</td>
            <td>31</td>
            <td></td>
        </tr>
    </tbody>
</table>

＆＃13;

＆＃13; 感谢您花时间阅读本文。

Answer 1

您可以为每个td分配ID。然后，当您访问每个元素时，您可以访问$（'＃'+ id）。这将确保您的函数以DOM上任何位置的元素为目标。

操作日历多个元素（td），尝试.find .next .closest已经

1 个答案: