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

Question

寻找解决方案以突出显示 table 中的 <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 个 child css pseudo.

我在这里创建了一个快速的 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 必须是唯一的。您应该使用 classes。 IE。 class="order1" 和 $('.order1').addClass(...)。此外，您的 JS 偏离了方向，因为您正在选择不存在的项目，并且将 tds inside 这些选择器作为目标，而不是 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.

实际上，您还可以对每个人执行如下操作 class:

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

但我决定"automate"这个。

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

Highlight multiple rows with specific ID's

html

jquery

highlight