jQuery选择7个表格单元格后答案

【问题标题】：jQuery select 7 table cells afterjQuery选择7个表格单元格后
【发布时间】：2013-09-24 08:10:16
【问题描述】：

我正在构建一个日历预订系统，并将天分为 30 分钟间隔。当用户将鼠标悬停在一个 30 分钟的部分上时，我想自动突出显示其正下方行中的表格单元格，以说明预订一小时。表设置如下。试图弄清楚如何在我悬停之后选择第 7 个 td。因此，如果我将鼠标悬停在上午 6:00 行中的第一个 td 上，我将更改此单元格和上午 6:30 行中的第一个 td 的背景。

<table>
            <tr>
                <th></th>
                <th>Monday</th>
                <th>Tuesday</th>
                <th>Wednesday</th>
                <th>Thursday</th>
                <th>Friday</th>
                <th>Saturday</th>
                <th>Sunday</th>
            </tr>

            <tr>
                <th>6:00am</th>
                <td class="bookLink"></td>
                <td class="bookLink"></td>
                <td class="bookLink"></td>
                <td class="bookLink"></td>
                <td class="bookLink"></td>
                <td class="bookLink"></td>
                <td class="bookLink"></td>
            </tr>

            <tr>
                <th>6:30am</th>
                <td class="bookLink"></td>
                <td class="bookLink"></td>
                <td class="bookLink"></td>
                <td class="bookLink"></td>
                <td class="bookLink"></td>
                <td class="bookLink"></td>
                <td class="bookLink"></td>
            </tr>

【问题讨论】：

标签： javascript jquery

【解决方案1】：

这样的？

$('td').on('mouseenter mouseleave', function(){
    var index = $('td').index(this);
   $(this).add($('td').eq(index + 7)).toggleClass('active');
});

Fiddle

var $tds = $('.tblHoverTest').find('td'); //get and cache all the tds of the table
$tds.on('mouseenter mouseleave', function(){ //register event
    var index = $tds.index(this); //get the index of current td with respect to all ts
   $(this).add($tds.eq(index + 7)).toggleClass('active'); //apply class to this td and the 7th td preceeding this using index.
});

Fiddle

【讨论】：

【解决方案2】：

看起来您只需要突出显示下一行中的第一个单元格，您可以使用 jQuery 轻松做到这一点（在本示例中，我只是针对每行中的第一个单元格）：

$(document).ready(function() {
    $('tr td:eq(0)').hover(
        // mouseenter event
        function() {
            var $next = $(this).parent('tr').next('tr');
            $(this).add($('td:eq(0)', $next)).addClass('hovered');
        },
        // mouseleave event
        function() {
            var $next = $(this).parent('tr').next('tr');
            $(this).add($('td:eq(0)', $next)).removeClass('hovered');
        }
    );
});

http://jsfiddle.net/qeF74/

此外，我还冒昧地调整了您的表格代码，th 元素只能在 thead 中使用，并且您不应该在同一行中混合使用它们（您示例中的第一个单元格使用 th，以下使用 td's）。然后，您可以将重复行包裹在 tbody 标记中，然后对所有单元格使用 td。

【讨论】：

【解决方案3】：

如果你有 jQuery，你可以使用index() 函数，类似：

$("td").hover(function() {
    var i = $(this).parent("tr").find("td").index(this);
    var cellToHighlight = $(this).parent("tr").next("tr").find("td").eq(i);
    // do something to highlight it
});

这不是超级干净的代码，但它试图展示这个想法。

【讨论】：