jQueryの兄弟を使用して、HTMLテーブル<th>を見つけようとしています

Question

多くの非表示の列を持つHTMLテーブルがあります。列は3の集合と考えることができます。最初の2つは非表示で、3番目は表示可能です。第3にマウスオーバーすると、3のセットの最初の2も表示可能になります。私は、マウスオーバーが起こっている列のトップ2 <th>を選択する方法を見つけ出そうとしています。したがって、jQueryを使用してcolspan='3'をに追加して<th>に追加して、 "set"の3列にまたがるようにします。

例：マウス1番目の黄色の列には、その列の前で非表示になっていた2つの列が表示されます。 "1000017"と "Potato Chips"が選択されている必要がありますので、列のスパンを3に変更して列を正しくカバーするようにします。私の現在のコードは正しく動作しませんし、代わりに "アイテム名"の行全体を選択します。

私のthis.siblings jQuery行は、行全体ではなく適切な<th>が選択されるように修正できますか？

以下のスニペットを参照してください：

ここ

$('.yellowbr').hover(function() { 
 
    var sel = $(this).index(); 
 
    $('tr').each(function(){ 
 
    $('td',this).slice(sel-3,sel-1).toggleClass('hidetd'); 
 
    $(this).siblings().first().toggleClass('light'); 
 
    }) 
 
})

table, 
 
th, 
 
td { 
 
    border: 1px solid black; 
 
    border-collapse: collapse; 
 
} 
 
.yellowbr { 
 
    background-color: yellow; 
 
} 
 

 
.hidetd { 
 
    display:none; 
 
} 
 

 
.light { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <th>Item #</th> 
 
    <th>100017</th> 
 
    <th>100018</th> 
 
    <th>100019</th> 
 
    <th>100020</th> 
 
    </tr> 
 
    <tr> 
 
    <th>Component</th> 
 
    <th><u>Potato chips</u> 
 
    </th> 
 
    <th><u>butterfingers</u> 
 
    </th> 
 
    <th><u>Flat Pretzels</u> 
 
    </th> 
 
    <th><u>Milk Chocolate</u> 
 
    </th> 
 
    </tr> 
 
    <tr> 
 
    <th>2016-01-03</th> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    </tr> 
 
    <tr> 
 
    <th>2016-01-04</th> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    </tr> 
 
    <tr> 
 
    <th>2016-01-05</th> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    </tr> 
 
    <tr> 
 
    <th>2016-01-06</th> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    </tr> 
 
    <tr> 
 
    <th>2016-01-07</th> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    </tr> 
 
</table>

には列が非表示になっていないと、すべての見出しが正しい列をカバーする「3」=またがった場合、すべてがどのように見えるかです。

は

.yellowbr { 
 
    background-color: yellow; 
 
} 
 

 
table,th, td { 
 
    
 
    border: 1px solid black; 
 
    border-collapse: collapse; 
 
     
 
}

<table> 
 
    <tr> 
 
    <th>Item #</th> 
 
    <th colspan="3">100017</th> 
 
    <th colspan="3">100018</th> 
 
    <th colspan="3">100019</th> 
 
    <th colspan="3">100020</th> 
 
    </tr> 
 
    <tr> 
 
    <th>Component</th> 
 
    <th colspan="3"><u>Potato chips</u></th> 
 
    <th colspan="3"><u>butterfingers</u></th> 
 
    <th colspan="3"><u>Flat Pretzels</u></th> 
 
    <th colspan="3"><u>Milk Chocolate</u></th> 
 
    </tr> 
 
    <tr> 
 
    <th>2016-01-03</th> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    </tr> 
 
    <tr> 
 
    <th>2016-01-04</th> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    </tr> 
 
    <tr> 
 
    <th>2016-01-05</th> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    </tr> 
 
    <tr> 
 
    <th>2016-01-06</th> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    </tr> 
 
    <tr> 
 
    <th>2016-01-07</th> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    </tr> 
 
</table>

Answer 1

これは、あなたが探しているものですか？

$('.yellowbr').hover(function() { 
 
    var sel = $(this).index(); 
 
    $('tr').each(function() { 
 
    $('th', this).slice(sel/3, sel/3 + 1).attr('colspan', 3); 
 
    $('th', this).filter(function(i) { 
 
     return i !== sel/3; 
 
    }).attr('colspan', 1); 
 

 
    var cellsToHightlight = $('td', this).slice(sel - 3, sel - 1); 
 
    for (var i = 0; i < cellsToHightlight.length; i += 1) { 
 
     var cell = $(cellsToHightlight[i]); 
 
     if (cell.hasClass('hidetd')) { 
 
     cell.removeClass('hidetd'); 
 
     } 
 
    } 
 

 
    $('td', this).filter(function(i, el) { 
 
     return (i < sel - 3 || i > sel - 1) && (i + 1) % 3 !== 0; 
 
    }).addClass('hidetd'); 
 

 
    $(this).siblings().first().toggleClass('light'); 
 
    }); 
 
});

table, 
 
th, 
 
td { 
 
    border: 1px solid black; 
 
    border-collapse: collapse; 
 
} 
 
.yellowbr { 
 
    background-color: yellow; 
 
} 
 
.hidetd { 
 
    display: none; 
 
} 
 
.light { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <th>Item #</th> 
 
    <th>100017</th> 
 
    <th>100018</th> 
 
    <th>100019</th> 
 
    <th>100020</th> 
 
    </tr> 
 
    <tr> 
 
    <th>Component</th> 
 
    <th><u>Potato chips</u> 
 
    </th> 
 
    <th><u>butterfingers</u> 
 
    </th> 
 
    <th><u>Flat Pretzels</u> 
 
    </th> 
 
    <th><u>Milk Chocolate</u> 
 
    </th> 
 
    </tr> 
 
    <tr> 
 
    <th>2016-01-03</th> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    </tr> 
 
    <tr> 
 
    <th>2016-01-04</th> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    </tr> 
 
    <tr> 
 
    <th>2016-01-05</th> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    </tr> 
 
    <tr> 
 
    <th>2016-01-06</th> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    </tr> 
 
    <tr> 
 
    <th>2016-01-07</th> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='hidetd'>0</td> 
 
    <td class='yellowbr'>0</td> 
 
    </tr> 
 
</table>