Question

寻找解决方案以突出显示表格中的<td>元素，并在悬停时使用特定ID。

我的代码

    $('#orderstable').hover(function()
    {
        $('#id_1').find('td').addClass('hover');
    }, function()
    {
        $('#id_1').find('td').removeClass('hover');
    });

#orderstable td
{ 
    padding:0.7em;
    border:#969696 1px solid;
}

.hover
{
    background:yellow;
}

<table id="orderstable">
<thead>
    <tr>
        <th>Proces</th>
        <th>Step 1</th>
        <th>Step 2</th>
        <th>Step 3</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Proces 1</td>
        <td id='order_2'>job 2</td>
        <td id='order_1'>job 1</td>
        <td id='order_3'>job 3</td>
    </tr>
    <tr>
        <td>Proces 2</td>
        <td id='order_3'>job 3</td>
        <td id='order_4'>job 4</td>
        <td id='order_1'>job 1</td>
    </tr>
</tbody>
</table>

我想要实现的是当您将鼠标悬停在id ='order 1'的td单元格上时，它会突出显示此<TD>以及其他具有id ='order_1'的td。当然，我需要其他id的相同功能（order_2，order_3等）。

有什么想法吗？

Answer 1

我建议使用类，但是要回答你的问题，你可以通过使用第n个子css伪实现这个。

我在这里创建了一个快速JSFiddle作为示例。 https://jsfiddle.net/fzjuxyeL/8/ - 更新了工作！

#order_1:nth-child(1n+1)
// Start at 1 and increment by 1 finding all divs with ID

$('#order_1:nth-child(1n+1)').hover(function(){
    $('#order_1:nth-child(1n+1)').toggleClass('toggled')
});
// Applies class to all divs with specified ID when hovered

Answer 2

ID必须是唯一的。你应该使用课程。 IE浏览器。 class="order1"和$('.order1').addClass(...)。此外，您的JS还有一段距离，因为您选择了不存在的项目，并将td s 定位在这些选择器中，而不是定位在tds本身上。为了实现你的目标，我会做这样的事情：

$('#orderstable').on('mouseover', 'td', function() {
    var elemClass = this.className
        .split(' ') // Gets array of classes
        .filter(function(item) {
            return item.match(/order_\d/) || false;
        }) // Filter down to classes matching 'order_[NUMBER]'
        .pop(); // Get the class. (Actually gets the last item in an array that contains only one item, so same thing.)
    $('.' + elemClass).addClass('hover');
}).mouseout(function() {
    $(this).find('td').removeClass('hover');
});

Here's a JSFiddle demonstrating this.

实际上，您还可以为每个班级做以下事情：

$('.order_1').hover(function() {
    $('.order_1').toggleClass('hover');
});

但我决定＆＃34;自动化＆＃34;此

突出显示具有特定ID的多行

2 个答案: