Question

我正在建立一个日历预订系统，天数分为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>

Answer 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

Answer 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/

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

Answer 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
});

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

jQuery之后选择7个表格单元格

3 个答案: