1

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

3 回答 3

1

看起来您只需要突出显示下一行中的第一个单元格，您可以使用 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。

于 2013-09-24T00:10:16.240 回答
1

像这样的东西？

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

小提琴

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

小提琴

于 2013-09-23T23:53:43.813 回答
0

如果你有 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
});

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

于 2013-09-23T23:51:34.577 回答